CSS 类名选择器

示例

类名选择器选择具有目标类名的所有元素。例如,类名称.warning将选择以下<div>元素:

<div class="warning">

    <p>This would be some warning copy.</p>

</div>

您还可以将类名称更具体地组合到目标元素。让我们以上面的示例为基础,展示更复杂的类选择。

的CSS

.important {

    color: orange;

}

.warning {

    color: blue;

}

.warning.important {

    color: red;

}

的HTML

<div class="warning">

    <p>This would be some warning copy.</p>

</div>

<div class="important warning">

    <p class="important">This is some really important warning copy.</p>

</div>

在此示例中,具有.warning类的所有元素将具有蓝色文本颜色,具有.important类的所有元素将具有橙色文本颜色,同时具有.important和.warning类名的所有元素将具有红色文本颜色。

请注意,在CSS中,.warning.important声明在两个类名之间没有任何空格。这意味着它将仅查找同时包含类名warning和important其class属性的元素。这些类名称可以在元素上以任何顺序排列。

如果CSS声明中的两个类之间包含空格,则只会选择具有父.warning类名称和子.important类元素的元素。

以上是 CSS 类名选择器 的全部内容, 来源链接: utcz.com/z/315804.html

回到顶部