-1
类
我不明白，因为如果我有这样的CSS规则：CSS3选择器属性+
.glyphicon-star {
font-size: 55px;
color: #FF7F02;
}
span.glyphicon.glyphicon-star {
font-size: 30px;
color: gray;
}
和我有类.glyphicon.glyphicon星级跨度......我的规则将不会应用只有在这个span元素中，但在我的页面中的任何地方。
<body>
<div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Newest</h2>
<article>
<div id="crud1" class="panel panel-primary" >
<div class="panel-heading">
<h3 class="panel-title">
ChartLine 1
</h3>
<p>
</p>
</div><!-- panel-heading closed -->
<div class="panel-body">
<div class="container-fluid">
No-picture
</div>
</div><!-- panel-body closed -->
<div class="panel-footer clearfix">
<div class="col-md-8">
Description:
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-star"></span>
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-star"></span>
</div>
</div><!-- panel-footer closed -->
</div><!-- panel closed -->
</article>
<article>
<div id="crud1" class="panel panel-primary" >
<div class="panel-heading">
<h3 class="panel-title">
ChartLine 2
</h3>
<p>
</p>
</div><!-- panel-heading closed -->
<div class="panel-body">
<div class="container-fluid">
No-picture
</div>
</div><!-- panel-body closed -->
<div class="panel-footer clearfix">
<div class="col-md-8">
Description:
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-star"></span>
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-star"></span>
</div>
</div><!-- panel-footer closed -->
</div><!-- panel closed -->
</article>
<article>
<div id="crud1" class="panel panel-primary" >
<div class="panel-heading">
<h3 class="panel-title">
Chart 3
</h3>
<p>
</p>
</div><!-- panel-heading closed -->
<div class="panel-body">
<div class="container-fluid">
No-picture
</div>
</div><!-- panel-body closed -->
<div class="panel-footer clearfix">
<div class="col-md-8">
Description:
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-star"></span>
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-star"></span>
</div>
</div><!-- panel-footer closed -->
</div><!-- panel closed -->
</article>
<article>
<div id="c3-1" class="panel panel-primary" >
<div class="panel-heading">
<h3 class="panel-title">
ChartLine C3
</h3>
<p>
</p>
</div><!-- panel-heading closed -->
<div class="panel-body">
<div class="container-fluid">
<img src="/assets/img/pen_tomato.png">
</div>
</div><!-- panel-body closed -->
<div class="panel-footer clearfix">
<div class="col-md-8">
Description: Chart with round for prisma
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-star"></span>
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-star"></span>
</div>
</div><!-- panel-footer closed -->
</div><!-- panel closed -->
</article>
<article>
<div id="c3-3" class="panel panel-primary" >
<div class="panel-heading">
<h3 class="panel-title">
ChartLine C3
</h3>
<p>
</p>
</div><!-- panel-heading closed -->
<div class="panel-body">
<div class="container-fluid">
No-picture
</div>
</div><!-- panel-body closed -->
<div class="panel-footer clearfix">
<div class="col-md-8">
Description: Chart without axes
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-star"></span>
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-star"></span>
</div>
</div><!-- panel-footer closed -->
</div><!-- panel closed -->
</article>
<article>
<div id="c3-2" class="panel panel-primary" >
<div class="panel-heading">
<h3 class="panel-title">
ChartLine C3
</h3>
<p>
</p>
</div><!-- panel-heading closed -->
<div class="panel-body">
<div class="container-fluid">
No-picture
</div>
</div><!-- panel-body closed -->
<div class="panel-footer clearfix">
<div class="col-md-8">
Description: Chart with Date for prisma
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-star"></span>
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-star"></span>
</div>
</div><!-- panel-footer closed -->
</div><!-- panel closed -->
</article>
<article>
<div id="chr3" class="panel panel-primary" >
<div class="panel-heading">
<h3 class="panel-title">
Stacked Area Chart
</h3>
<p>
</p>
</div><!-- panel-heading closed -->
<div class="panel-body">
<div class="container-fluid">
No-picture
</div>
</div><!-- panel-body closed -->
<div class="panel-footer clearfix">
<div class="col-md-8">
Description:
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-star"></span>
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-star"></span>
</div>
</div><!-- panel-footer closed -->
</div><!-- panel closed -->
</article>
</div>
<div class="col-md-4">
<h2>Recently Updated</h2>
</div>
<div class="col-md-4">
<h2>Ordered</h2>
</div>
</div>
</div>
</div>
</body>
</html>
但是，如果我删除规则，并直接在代码中添加规则，我可以实现我的目标。 （显然我必须删除一般的css规则）
<div class="col-md-2">
<span class="glyphicon glyphicon-star" style="color:gray;">
</div>
也许是因为您忘记关闭span元素 – fcalderan
不，我试过但结果完全一样 –
@SilvioS。确保你的页面没有被缓存。在使用您提供的代码添加关闭“span”标记后，我无法复制此问题。 –