Question

我不明白，因为如果我有这个css规则：

.glyphicon-star {
    font-size: 55px;
    color: #FF7F02;
}

span.glyphicon.glyphicon-star {
    font-size: 30px;
    color: gray;

}

我有一个班级.glyphicon.glyphicon-star ...我的规则不仅适用于此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>

Answer 1

如果没有看到整个页面，很难给出确切的答案。可能是DOM树的某个地方是一个有相同类的元素吗？

还要注意其他一些事情：

您的<span>代码未关闭...可能会影响您网页的其余部分。

内联样式（如style="color: gray"）将始终否决样式表中的所有其他样式（除非您使用丑陋的!important规则）。

将样式应用于span.glyphicon.glyphicon-star会影响同时具有glyphicon类和.glyphicon-star类的范围。
使用span.glyphicon .glyphicon-star（包含空格）将影响具有类.glyphicon-star的子元素，该元素位于<span>类.glyhpicon内。

CSS3选择器属性+类

1 个答案: