-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」標記後，我無法複製此問題。 –