CSS选择器中的标签，id，类和属性的顺序是否重要？

Question

考虑以下HTML标记：

<input id="foo" class="bar" name="baz">

以下选择器是否相等（甚至有效）：

CSS

input#foo.bar[name=baz] { }
input.bar#foo[name=baz] { }
input[name=baz].bar#foo { }
/* etc */

是否可以将元素名称移动到例如end？

编辑：我知道具体是什么，我想知道需要指定标签，标识，类和属性的顺序。

Answer 1

请参考@Jukka的答案，因为OP似乎通过次要编辑改变了问题的含义，但如果有人在编辑之前对特异性问题感兴趣，请提前阅读。

---

首先，两个选择器都没有意义，事实上，它们超过特定的。

您的选择器包含id，这将是唯一的，因此不需要定义class和attr=val ^{（如果您没有对某些OTHER文档中的其他元素使用相同的id ..）}

如果在某些情况下，你需要它们，比如覆盖，比如... （有意义）

input#foo.bar[name=baz] {
   /* More specificity overrides the selector below */
}

input[name=baz] {
   /* Styles here */
}

以下选择器是否相等 - YES ，只要规格性相同，它们都会相等，它们都会返回121分

^Credits

---

（甚至有效） - 完全有效

---

标签的顺序 ^{（不相关）}，id，class - 否，无论顺序如何属性是，没关系。

<强> BUT

样式表中CSS声明块的顺序很重要，最后一个选择器将覆盖公共属性，因为所有三个选择器具有相同的特异性。

Demo （所有三个都将呈现绿色文本，无论其属性的顺序如何，但如果您对CSS选择器块进行随机播放，则最后一个将覆盖前两个选择器的公共属性 - 除非您可以在其中一个选择器属性中定义!important

---

是否可以将元素name ^（属性）移动到比如说结束？ - 是

---

专业人士＆amp;缺点 -

• 所有选择器都是过度专用的
• 表现不佳
• 使用attr=val选择器，您假设value属性的name不会更改，如果有，您也必须更改选择器。

  

P.S：养成引用属性值的习惯。

Answer 2

它们都是有效的，因为它们符合sequence of simple selectors的语法。它们是等价的，因为它们的含义，包括特异性，是以不依赖于组件顺序的方式定义的。

由于纯粹的语法原因，无法将元素名称（类型选择器）移动到最后。规范说明一个简单的选择器“始终以类型选择器或通用选择器开始。序列中不允许使用其他类型选择器或通用选择器“。这将被解释为必须首先出现类型选择器（如果存在）。这很自然，因为没有办法将它与例如前面的类选择器（由于它在CSS选择器语法中具有非常特殊的含义，因此无法使用空格：.bar input是一个有效的选择器，意味着与input.bar完全不同。

Answer 3

这些都是合法的：

<input type-"text" id="foo" class="bar" name="baz">

input#foo.bar[name=baz] { border:1px solid blue; }
input.bar#foo[name=baz] { border:1px solid red; }
input[name=baz].bar#foo { border:1px solid green; }

http://jsfiddle.net/hGj5B/

删除各种样式块，并注意每个选择器将选择文本框。

如果你问的是它们具有相同的特异性，那么答案是肯定的，因为每个选择器具有相同数量的元素，类，属性选择器和id。由于它们都是相同的，因此样式表中块的顺序将用于确定哪些冲突样式将胜出。

你不能将元素移动到最后，因为选择器的其他部分通过追随来描述它。

Answer 4

是的，所有这些都是合法的，但在执行时，后来的一个将过度使用早期声明，但有一些例外吗

检查此处的Flow例外

input[name=baz].bar#foo { border:1px solid green; }
input.bar#foo[name=baz] { border:1px solid red; }
input#foo.bar[name=baz] { border:1px solid blue; }
input { border:1px solid #000000; }

http://jsfiddle.net/hGj5B/

了解更多详情请参阅此问题.. The sequence of execution of CSS