CSS 选择器语法答案

【问题标题】：CSS Selector SyntaxCSS 选择器语法
【发布时间】：2013-02-13 20:20:18
【问题描述】：

对于这个 HTML：

<div id="idName" class="className">
...
</div>

我知道这是正确的选择器语法：

div.className {...}
div#idName {...}

我错了：

#idName.className {...}

它似乎可以工作，但我认为它无效。谁能确认这是否有效？

编辑：

为了澄清，这个 id 将出现在许多页面上，并且根据页面的用途，可能有不同的类。
页面 A：

#content.one-column {...}

B页：

#content.two-column {...}

【问题讨论】：

这个表达式用处不大，因为ID本身唯一标识元素，进一步缩小CSS选择器没有意义。相反，“.class1.class2”选择器是 100% 有效且有用的。
看看这个类似的问题：How to combine class and ID in CSS selector
进一步缩小 CSS 实际上对以下情况很有用：div#myId.selected 如果您在 javascript 中添加/删除类。这个选择器在 IE6 中不起作用，所以要小心。
@Roman，非常有用。 HTML 规范说 id 必须是该页面唯一的，而不是整个站点。同时指定 id 和 class 允许您在整个站点的特定区域/页面上定位特定元素。
@dcneiner 它不是那样工作的。当您在另一个页面上时，您不能使用 CSS 来定位页面上的元素。页面上的 CSS 仅适用于您当前所在的页面。

【解决方案1】：

有效。没有规定 ID 选择器必须在类选择器之后。

引用standard（强调我的）：

简单的选择器可以是type selector 或universal selector，后跟零个或多个attribute selectors、ID selectors 或pseudo-classes，顺序不限。

【讨论】：

嗯，我突然想到 CSS2.1 规范文档中这句话中缺少 class selectors。另外，需要明确的是，“任何顺序”仅指属性、ID、类和伪类的顺序 - 类型/通用必须始终排在第一位，如果您有伪元素，它必须排在最后，并且最多只能是类型/通用和伪元素之一。
本节已在最新的Selectors 3 module（2011 年标准化）中重写，其中正确列出了所有简单的选择器。另请注意，当前的术语将在 Selectors 4 中再次更改。

【解决方案2】：

是的，这很好，尽管含义不同。说“#idName”而不是“div#idName”并不局限于 div 元素。

【讨论】：

【解决方案3】：

这是完全有效的，但有点多余。如果你把它变成英文，它会说“选择所有具有 id 'idname' 和类 'className' 的元素”。这是多余的，因为您只能拥有具有特定 ID 的元素的一个实例。

【讨论】：

【解决方案4】：

我相信这是有效的语法，因为您的班级可能会更改为相同的 id。但是，您可能会遇到this

【讨论】：

【解决方案5】：

#id.className 是一个完全有效的选择器，它将选择所有具有ID 和类的元素。

【讨论】：

【解决方案6】：

即使它有效与否，在一个有效的 HTML 文档中不能有多个具有相同“id”的 html 节点，所以，我想你可以只使用 div #idName 来执行任何任务。

【讨论】：