html - 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 */

是否可以将元素名称移动到结尾？

编辑:我知道什么是特殊性，我想知道标签、id、类和属性需要指定的顺序。

Answer 1

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

纯粹出于句法原因，不可能将元素名称(类型选择器)移到末尾。规范说一个简单的选择器“总是以类型选择器或通用选择器开始。序列中不允许使用其他类型选择器或通用选择器”。这将被解释为类型选择器，如果存在，必须首先出现。这是很自然的，因为没有办法将它与例如前面的类选择器(不能使用空格，因为它在 CSS 选择器语法中具有非常特殊的含义:.bar input 是一个有效的选择器，其含义与 input.bar< 完全不同)。