What are the priorities among CSS selectors

Solution 1:

The gory details in the spec are actually reasonably readable. In summary:

1. !important rules and inline style rules win most.

2. Otherwise, normally the more specific wins. #id is a more specific selector than .classname is a more specific selector than tagname.

3. Where rules are equally specific, the one declared last wins.

There is no particular reason why this ‘shouldn't happen’. It's normal to specify a broad-brush rule and then add a more specific rule to target one case; multiple same-property rules on a single element are not unusual or undesirable.

Solution 2:

you have to find #no of id =A ,#no of class =B and #no of tag =c in the selector

ABC with higher value wins.

.wrapper .title  p {  
  //some other rules
}

A=0 B=2 C=1 =021

\#foo {
  // some more rules
}

A=1 = 100

.bar .head div li{
  // some more rules
}


A=0 B=2 C=2 =022

100>022>021

so #foo wins

Solution 3:

It should happen! That's why it's called CASCADING style sheets. You can find an example of the priorities here

Solution 4:

"#id" is more powerful than ".class" name and ".class" is more powerful than "tag" name. But if we apply "!important" than its priority is most of them.

• !important
• inline style
• id
• class
• tag