CSS选择器中的标签，id，类和属性的顺序是否重要？ [英] Does order of tag, id, class and attribute in CSS selector matter?

问题描述

请考虑以下HTML标记：

Consider the following HTML markup:

<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吗？

And is it possible to move the element name to, say, end?

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

I know what specificity is, I want to know in which order the tag, id, class and attributes need to be specified.

推荐答案

它们都有效，因为它们符合序列的语法的简单选择器。它们是等效的，因为它们的含义，包括特异性，以不依赖于组件顺序的方式定义。

They are all valid, as they comply with the syntax of sequence of simple selectors. They are equivalent, since their meaning, including specificity, are defined in a manner that does not depend on the order of the components.

不可能移动元素name（类型选择器）到结尾，纯粹是语法的原因。规范说，一个简单的选择器总是从一个类型选择器或通用选择器开始。在序列中不允许使用其他类型选择器或通用选择器。这将被解释，以便类型选择器，如果存在 必须首先出现。这是自然的，因为没有办法将它与例如一个前面的类选择器（一个空格不能使用，因为它在CSS选择器语法中有相当特殊的含义： .bar input 是一个有效的选择器， code> input.bar ）。

It is not possible to move the element name (type selector) to the end, for purely syntactic reasons. The spec says that a simple selector "always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence". This is to be interpreted so that the type selector, if present, must appear first. This is natural since there would be no way to distinguish it from e.g. a preceding class selector (a space could not be used since it has a quite special meaning in CSS selector syntax: .bar input is a valid selector and means something quite different from input.bar).

这篇关于CSS选择器中的标签，id，类和属性的顺序是否重要？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！