Question

我是css的初学者，我遇到了以下我不理解的代码。

.single-product h2 {
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 10px;
    margin-top: 15px;
}
.single-product h2 a {
    color: #222;
}
.single-product p {
    color: #1abc9c;
    font-weight: 700;
}

与上述代码相比，h2.single-product {}之间有什么区别？

Answer 1

h2.single-product将h2元素与类单品
.single-product h2匹配任何元素中具有单一产品类

请参阅适用于每个案例的示例。

    <!-- first declaration -->
    <h2 class="single-product">Testberichte</h2>

    <!-- second declaration -->     
    <div class="single-product">
        <h2>hi</h2>
    </div>

Answer 2

＆＃39; h2.single产物＆＃39;将以下样式应用于具有单一产品类的h2元素。

＆＃39; .single-product h2＆＃39;将样式应用于一个h2元素，该元素是具有单一产品类的元素的子节点。

CSS中的空白字符本身就是一个选择器，称为＆＃34;子节点＆＃34;选择;就像＆＃34;。＆＃34;字符被称为＆＃34;类＆＃34;选择器。

Answer 3

对于

h2.single-product {}

单品类属性在任何 h2 标记中显示其效果。

对于

.single-product h2

h2 标记的属性仅在单品类

时有效

课后的CSS选择器

3 个答案: