Does order of tag, id, class and attribute in CSS

问题:

Consider the following HTML markup:

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

Are the following selectors equal (or even valid):

CSS

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

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

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

回答1:

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.

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).

回答2:

Please refer the answer of @Jukka as OP seemed to have changed the meaning of the question by minor edit, but if anyone's interested in specificity question before edit, than please read ahead.

---

First of all, neither of the selectors make sense, to be true, they are over specific.

Your selector holds an id which will be unique, so defining class as well as attr=val is not required ^{(If you are not using the same id for other element in some OTHER document..)}

If for some case, you need them, say to override, like... (makes sense)

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

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

Are the following selectors equal - YES, they are equal as far as the specficity goes, they all return a score of 121

^Credits

---

(or even valid) - Completely Valid

---

Does order of tag^{(Not relevant)}, id, class - NO, whatever the order of attributes are, it doesn't matter.

BUT

The order of your CSS declaration block in the stylesheet matters, the last selector will override common properties as all the three selectors have equal specificity.

Demo (All three will render green text, regardless of the order of their attributes, but if you shuffle the CSS selectors block, the last one will override the common properties of previous two selectors - unless you define !important in one of the selector properties)

---

And is it possible to move the element name^(Attribute) to, say, end? - YES

---

Pros & Cons —

• All the selectors are overspecific
• Bad as far as performance goes
• Using attr=val selector, you are assuming that the value of the name attribute won't change, if it does, you will have to change your selectors as well.

P.S : Have an habit of quoting the attribute values.

回答3:

Those are all legal:

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

Remove the various style blocks and note that each selector will select the textbox.

By "equal", if you are asking is they have equivalent specificity, then the answer is yes given each selector has the same amount of elements, classes, attribute selectors, and ids. Since they are all equal, the order of the blocks in your stylesheet will serve to determine which conflicting styles will win out.

You cannot move the element to the end, as the other segments of the selector describe it by coming after.

回答4:

Yes all of them are legal , But while execution the Later one Will over ride the Earlier Declarations,but some exceptions are there

check the Flow exceptions Here

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/

for More Details Refer this Question.. The sequence of execution of CSS