“.subtitle {}”和“h2[class=subtitle]”有什么区别？

Question

我最近刚开始学习HTML & CSS，有很多疑问--这就是其中之一

有谁能解释一下，如果我必须给代码中的每个h2上课才能使“h2class=subtitle {}”工作，那么我为什么不简单地提到“.subtitle {}”呢？

所以，请解释我在哪里可以使用h2class=value格式&在哪里可以使用.subtitle

​

.subtitle {
  color: red;
}
/* or */
h2[class=subtitle] {
  color: red;
}

<h2 class="subtitle">About Me</h2>

<h2 class="subtitle">Services</h2>

<h2 class="subtitle">Contact Us</h2>

​

Answer 1

.subtitle将应用于任何具有包含subtitle的class属性的元素，而不管它的类型或class属性中的其他条目。例如，.subtitle {}将匹配以下所有元素：

<h1 class="subtitle">Subtitle</h1>
<h2 class="red-text subtitle">Subtitle</h2>
<p class="subtitle text-center">Centered subtitle</p>

但是，h2[class=subtitle]只针对具有与subtitle匹配的类属性的<h2>元素。如果类名有附加值，或者元素不是<h2>，即：

<h2 class="subtitle"> <!-- matches -->
<h2 class="subtitle red"> <!-- won't match -->
<h1 class="subtitle"> <!-- won't match -->

然而，值得注意的是它的特殊性。h2[class=subtitle]比.subtitle更具体，所以任何包含它的样式都会覆盖在.subtitle中定义的样式。

通常情况下，您应该避免编写[class=]选择器，因为它们非常具体，因此很难将样式表重用到其他元素中，这意味着如果标记发生更改，则需要进行重构。

方括号符号实际上称为“属性选择器”，可用于根据元素的属性和值选择元素。您可以阅读更多关于它的这里。还值得注意的是，可以在属性选择器中使用=以外的其他等式检查，如上面的MDN链接的语法部分所解释的那样。

Answer 2

[class=subtitle]目标元素，其中只有subtitle和类。

​

[class="subtitle"]{
  color:red;
}

<div class="subtitle">subtitle</div>
<div class="subtitle A">subtitle A</div>

​

如果不需要指定元素只有一个类来应用样式，则应该使用.subtitle。

通过前面添加h2，您只使用应用了subitle类的目标h2元素，它更具体。

[...]通常用于在输入或自定义data-...中选择属性(如type )。

​

input{
  border:3px solid black;
}
[type=text]{
  background-color:red;
}
input[type=text]{
  /*more specific : priority*/
  background-color:orange;
}

<input type="text">
<input type="email">

​

您可以检查选择器和组合器这里。

Answer 3

h2[class=subtitle]更具体(谷歌表示.)因此，取消了不那么具体的.subtitle选择器(这也适用于具有该类的其他标记)。

不过，您宁愿使用h2.subtitle {...}而不是h2[class=subtitle] {...}来组合类和标记。h2[class=subtitle] {...}实际上使用属性选择器而不是类选择器。