有什么区别?

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

读者 Paul 写道

.container div { }div.container { } 之间有什么区别?

Paul,你提出这样的问题真是太好了。答案对于理解 CSS 非常重要,因为这两个选择器选择的是截然不同的东西。这与 之前提出的这个问题 非常相似。

也许用“通俗易懂的英语”解释它们的区别是一个好方法。

.container div

“选择任何类名为“container”的元素的子元素中的任何 div 元素”

div.container

“选择任何类名为“container”的 div 元素”

它们之间的关键区别在于空格。CSS 选择器中的空格具有非常特殊的含义。这意味着空格右侧的选择器部分位于(是子元素)左侧的选择器部分内。这并不适用于您的第二个示例,因为它没有空格。

这里第二个概念称为标签限定,这可能有点令人困惑。标签限定选择器是div.container。这意味着它将仅选择类名为“container”的<div>元素,而不会选择其他元素。删除div,则得到.container,它几乎相同,只是会选择任何具有该类名的元素。标签限定选择器具有稍微更高的特异性。就我个人而言,我很少使用标签限定选择器。它们不太灵活,而且在技术上效率较低