Understanding CSS selector priority / specificity

I'd like to understand how CSS selectors work with properties collisions, how a property is selected instead of another one?

 div {
      background-color:red;
 }
 div.my_class {
      background-color:black;
 }
 div#my_id {
      background-color:blue;
 }
 body div {
      background-color:green;
 }
 body > div {
      background-color:orange;
 }
 body > div#my_id {
      background-color:white;
 }

 <html>
      <body>
           <div id="my_id" class="my_class">hello</div>
      </body>
 </html>

For someone this could be obvious, but not for me!

Does exist some guide or link where I can finally understand how selector priority works?

标签： html css css-selectors

4条回答

旧人旧事旧时光

2楼-- · 2018-12-31 09:27

Element

Class selectors

ID Selectors

Inline styles

!important

In order, 1 is the lowest specificity and 5 is the highest. https://youtu.be/NqDb9GfMXuo will shown details to demo it.

0人赞添加讨论(0) 举报

只靠听说

3楼-- · 2018-12-31 09:36

You can refer the full answer here Mozilla documentation

Start from the most specific: id selectors > class selectors > type selectors(normal h1, p tag and so on..) !important always wins, but it is considered a bad practice.See the link above.

The best way is to experiment with it:

  <!-- start class vs id -->
  <p class="class1" id="id1">.class vs #id: The winner is #id</p>

  <!-- upper vs bottom -->
  <p id="id2">the very bottom is the winner</p>

  <!--most specific is the winner -->
  <p id="id3">the most specific</p>

  <!--pseudo and target selector -->
  <h3>pseudo vs type selector</h3>

  <!-- !important is more important! -->
  <h1 id="very-specific">HI! I am very important!</h1>
  </body>

CSS:

#id1{
    color: blue;
}

.class1{
    color: red;
}

#id2{
    color: yellow;
}

#id2{
    color : green;
}

body p#id3{
    color :orange;
}

body p{
    color : purple;
}

body{
    color : black;
}

h3::first-letter {
    color: #ff0000;

}

h3{
    color: CornflowerBlue ; 
}

h1{
    color: gray !important;
}

body h1#very-specific{
    color: red;
}

Here's a test case.

0人赞添加讨论(0) 举报

不再属于我。

4楼-- · 2018-12-31 09:42

I'll just toss in a link to the CSS 2.1 spec itself, and how browsers are supposed to calculate specificity:

CSS 2.1 Section 6.4.3:

A selector's specificity is calculated as follows:

count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)

count the number of ID attributes in the selector (= b)

count the number of other attributes and pseudo-classes in the selector (= c)

count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

If the specificities are equal, then CSS 2.1 Section 6.4.1 comes into play:

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

Note that this is talking about when the style is defined, not when it is used. If classes .a and .b have equal specificity, whichever is defined last in the stylesheet(s) wins. <p class="a b">...</p> and <p class="b a">...</p> will be styled identically, based on the definition order of .a and .b.

0人赞添加讨论(0) 举报

旧时光的记忆

5楼-- · 2018-12-31 09:47

What you are interested in is specificity.

Firebug is a great tool to help inspect this. But other browsers also have built in tools for inspecting the applied CSS rules.

0人赞添加讨论(0) 举报

Understanding CSS selector priority / specificity

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间