CSS中的点是什么意思？答案

【问题标题】：What does the dot mean in CSS?CSS中的点是什么意思？
【发布时间】：2012-09-30 10:34:28
【问题描述】：

谁能解释这两个 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;
}

【问题讨论】：

【解决方案1】：

案例

.class_name 表示类名

.outside.inside

表示具有.inside 类的元素从具有.outside 类的元素继承

.name1.name2

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

相关问题：

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

要快速检查样式表是否有语法错误，jigsaw.w3.org/css-validator 非常方便。错误处理规则在 w3.org/TR/CSS21/syndata.html#parsing-errors 的规范中定义，在这种情况下，它们意味着忽略整个规则（但样式表的其他部分不受影响）。
@BoltClock，在 CSS 中，我认为您也可以在 div.ui-datepicker 之类的中间添加一个点。你会怎么解释？

【解决方案3】：

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

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

如果没有，它是一个标签，针对所有带有标签名称的元素。

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

【讨论】：

【解决方案4】：

. 说它的类

# 表示它的 id

如果只有选择器，那么它就是一个标签

【讨论】：

【解决方案5】：

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

例如：

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

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

例如

<h3 id="idname1">Heading</h3>

【讨论】：