54

有人可以解释这两个 CSS 选择器的区别吗？

.work-container . h3 {
font-size: 14px;
margin-top: 0px;
font-weight: 600;
height: 27px;
}

上定义中多余的点是什么？

.work-container h3 {
font-size: 14px;
margin-top: 0px;
font-weight: 600;
height: 27px;
}
4

5 回答 5

77

案例

  • 选择器以点开头

.class_name表示类名

  • 两个用空格分隔的点状选择器

.outside .inside

表示具有.inside类的元素源自具有类的元素.outside

  • 两个没有分隔的点选择器

.name1.name2

表示同时具有类name1和name2 例如的元素：class="name1 name2"

相关问题：

于 2016-07-22T05:53:17.627 回答
48

前缀通常代表一个.类选择器，但如果它后面紧跟空格，那么它是一个语法错误。

如果我冒险猜测，那么作者很可能是想说.work-container > h3，但在他即将键入>字符（子组合符）时错过了 Shift 键。

您的第二个选择器 ，.work-container h3仅表示h3包含在具有名为 的类的元素中的任何内容work-container。

于 2012-10-10T02:36:15.500 回答
17

.在 CSS 中意味着它是一个类，它可以应用于许多元素。

#在 CSS 中意味着它是一个 ID，它可以应用于每个页面的一个元素。

没有任何一个，它是一个标签，针对具有标签名称的所有元素。

在您的语法中，.work-container . h3实际上是错误的。.应该是,或者正如BoltClock所说的那样>，它表示 CSS 中的直接后代运算符。

于 2012-10-10T02:38:18.557 回答
10

.说它的类

#意味着它的一个ID

如果除了选择器之外什么都没有，那么它就是一个标签

于 2012-10-10T02:36:34.607 回答
6

.在 CSS 中意味着它是一个类，它可以应用于许多在类之间使用空间的元素

例如：

<h3 class="class1 class2 class2">Heading</h3>

#在 CSS 中意味着它是一个 ID，它可以应用于每个页面的一个元素。

例如

<h3 id="idname1">Heading</h3>
于 2012-10-10T12:19:03.453 回答