读者 Paul 写道
.container div { }
和div.container { }
之间有什么区别?
Paul,你提出这样的问题真是太好了。答案对于理解 CSS 非常重要,因为这两个选择器选择的是截然不同的东西。这与 之前提出的这个问题 非常相似。
也许用“通俗易懂的英语”解释它们的区别是一个好方法。
.container div
“选择任何类名为“container”的元素的子元素中的任何 div 元素”
div.container
“选择任何类名为“container”的 div 元素”
它们之间的关键区别在于空格。CSS 选择器中的空格具有非常特殊的含义。这意味着空格右侧的选择器部分位于(是子元素)左侧的选择器部分内。这并不适用于您的第二个示例,因为它没有空格。
这里第二个概念称为标签限定,这可能有点令人困惑。标签限定选择器是div.container
。这意味着它将仅选择类名为“container”的<div>
元素,而不会选择其他元素。删除div
,则得到.container
,它几乎相同,只是会选择任何具有该类名的元素。标签限定选择器具有稍微更高的特异性。就我个人而言,我很少使用标签限定选择器。它们不太灵活,而且在技术上效率较低。
标签限定选择器在将样式应用于具有细微更改的一组不同元素时似乎很有用。
我经常将其用于笔记
然后内联“notes”只需具有颜色和斜体效果,而我的“div”笔记则在其周围添加了一些填充并居中对齐。这可以避免我重复代码,如果需要,我可以在一处更改它。
不过我同意——标签限定选择器最好少用。
“.container div”不会选择子元素。它选择后代。更新您的句子:“选择任何类名为“container”的元素的后代中的任何 div 元素”
“.container > div”仅选择子元素。
我一直对此感到困惑——有什么区别?
@Nile
“也许用‘通俗易懂的英语’解释它们的区别是一个好方法。”
子女是父母的直系后代,就像儿子之于父亲。因此“.container > div”将选择直接位于具有附加类“container”的父元素内部的元素。
后代是指可以通过任意数量的祖先关系追溯到祖先的任何人。孙子孙女、曾孙曾孙女等,所有可以追溯到一个祖先血统的人都是该祖先的后代。“.container div”将选择任何后代,而不仅仅是直接的子女。
我现在更理解了。它只获取直接后代。8|-)
感谢您的解释
另一件需要说明以澄清的事情是
div .container
也与
div.container 不同(再次注意空格)。
这将选择页面上任何 div 的任何后代,这些后代具有 container 类。虽然它不是特别有用,但对于 CSS 新手来说可能会造成混淆
还有
.note {}
将比
div.note {}
…执行得更快。随机信息。
真的吗?为什么会这样?
要求更少,因此需要检查的内容更少。这说得通。
您不会看到任何区别。
好的,这说得通。
但是性能差异大吗?我知道样式 id 比类快,但差异非常小,不应考虑。
无论如何,有人知道是否有用于衡量 CSS 速度的基准测试吗?
Jamie 说的没错,但通常不建议这样做;它降低了类的可重用性,正如 Bill 所说,性能提升可以忽略不计。
Renan,它将独立于浏览器/渲染引擎,我不知道你将如何处理它。
我确实知道,除非您在 JavaScript 中使用“类似 CSS 的选择器”,否则您不需要考虑这个问题。
我一直只使用像 .”class” 这样的简单代码。
我认为对于初学者来说,这篇文章令人困惑,因为您试图同时解释两个差异。这些示例在顺序(div container、container div)和选择器(点与空格点)方面都不同。
感谢您澄清这一点,Chris,理解这些东西可能很困难。
在我看来,这是理解 CSS 的一个基本关键,也是我被问到无数次的问题。Chris,你需要说出来,干得好!:)
这是我最喜欢问那些自称精通 CSS 的面试候选人的问题。大多数人无法正确回答。甚至更少的人甚至没有听说过特异性
您“面试候选人”。哇,让我印象深刻。在如此强大的职位上(面试!候选人!),您不应该对双重否定更小心吗?
“甚至更少的人甚至没有听说过特异性”
.container div
这将选择作为 .container 的*后代*的 div,而不是子元素(子元素表示一个级别)。
我不敢相信我以前不知道这一点!我一直只是可以互换地使用这两个,有时会遇到一些问题,我不明白为什么我的样式没有正确应用。这是一个我认为将真正有很大帮助的“小”信息片段。
您的选择器越具体,效率越低,这太违反直觉了。
好吧!
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors
这可能有助于每个人完全理解后代和子元素选择器。
div.container 和 .container 之间存在差异,那就是级联特异性。
每种类型的选择器都分配一个数值。更高的特异性将覆盖特异性较低的规则。
选择器:.container 特异性:10(一个类选择器)
选择器:div.container 特异性:11(一个类选择器和一个 HTML 选择器)
换句话说,div.container 将覆盖继承自 .container 的属性,因为 div.container 更具体。
感谢分享!
这两个 div 似乎具有相同的功能……但正如我们所看到的,事实并非如此。