CSS中的点号代表什么？

Question

有人能解释一下这两个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;
} 

- code-gijoe

---

第一个示例不是有效的CSS。可能是打字错误。 - steveax

CSS文件中有很多奇怪的属性，而我并不是CSS专家。 - code-gijoe

Answer 1

选择器

• 以点开头的选择器

.class_name 表示类名

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

.outside .inside

表示带有 .inside 类的元素是带有 .outside 类的元素的后代元素

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

.name1.name2

表示具有 name1 和 name2 两个类的元素，例如：class="name1 name2"

相关问题:

• CSS选择器中的空格代表什么？即 .classA.classB 和 .classA .classB 之间有什么区别？
• CSS类 .foo.bar（无空格）和 .foo .bar（有空格）之间有什么区别？

- Jobin

---

谢谢！我查阅了4个CSS选择器在线指南和Eric Meyer的“CSS口袋参考”，但在它们中没有找到这个区别。 - John Pankowicz

Answer 2

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

如果我猜的话，很可能作者想说的是.work-container > h3，但在他要输入>字符（child combinator）时，错过了Shift键。

你的第二个选择器.work-container h3，只是表示任何包含在名为work-container的类元素中的h3。

- BoltClock

---

要快速检查样式表是否有语法错误，http://jigsaw.w3.org/css-validator/ 网站非常方便。错误处理规则在 http://www.w3.org/TR/CSS21/syndata.html#parsing-errors 规范中有定义，在这种情况下，它意味着整个规则将被忽略（但是样式表的其他部分不受影响）。 - Jukka K. Korpela

@BoltClock，在CSS中，我认为你也可以在类似div.ui-datepicker这样的东西中间加一个点。你会如何解释它？ - Jogi

Answer 3

.在CSS中表示class，可以应用于多个元素。

#在CSS中表示ID，每个页面只能应用于一个元素。

如果没有这两个符号，则是标签，目标是所有具有该标签名称的元素。

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

- Praveen Kumar Purushothaman

---

请问您能详细说明一下“针对所有用法”的含义吗？ - muthuh

@muthuh 对不起，我以前真的很蠢。它旨在匹配标签名称。希望现在清楚了。我也更新了答案。 - Praveen Kumar Purushothaman

Answer 4

.表示它的类别

#表示它的id

如果选择器里只有标签，那么就是标签选择器

- techBeginner

Answer 5

.在CSS中表示它是一个类，并且可以通过在类之间使用空格应用于许多元素。

例如：

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

在CSS中，#代表ID，每个页面只能应用于一个元素。

例如：

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

- Santosh Kori