关于类选择器前面加标签的问题

Question

请问定义一个类选择器时在.前面加标签和不加标签有什么区别吗，比如

<title>Title</title>

将.nav写成ul.nav或者直接写成.nav有什么区别吗？

Answer 1

在定义一个类选择器时，在"."前面加标签和不加标签会有区别。假设我们有以下 HTML 代码：

<ul class="nav">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

如果我们定义一个样式为：

.nav {
    background-color: red;
}

这个样式定义将应用于所有 class 为 "nav" 的元素，无论其是什么标签类型。也就是说，在这种情况下，以 ".nav" 为选择器等同于 "* .nav"，意思是所有元素下的 class 为 "nav" 的元素。

如果我们定义一个样式为：

ul.nav {
    background-color: red;
}

这个样式定义将仅应用于 ul 标签中带有 class "nav" 的元素。这是因为 ".nav" 是 ul 标签的子选择器，表示只匹配 ul 标签中带有 class "nav" 的元素。

综上所述，如果您希望一个样式仅应用于一个特定类型的元素中的类，您应该以标签名称为前缀编写该类选择器。如果您希望一个样式应用于多种类型的元素中的类，您可以省略标签名称并仅使用类选择器。