CSS Specificity: ID overwritten by class + element

StackOverflow https://stackoverflow.com/questions/22811542

  •  26-06-2023
  •  | 
  •  

문제

So, my id selector with a colour !important is being overwritten by a simple .class h1 selector with no !important. I am baffled and unable to find any info on this.

I know about css specificity and no matter how I look at it, I would expect the h1 to be green even without the !important.

HTML:

<body id='id'>
  <div class='class'>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</body>

CSS:

.class { color: black; }
.class h1 { color: red; }
#id { color: green !important; }

Demo: http://jsfiddle.net/TJ8tj/2/

I have tested this behaviour in latest Chrome, Safari and Firefox on OS X 10.9.1

도움이 되었습니까?

해결책

Your .class h1 rule is applying a color directly to the h1 element itself, so it will never inherit the color from body. The !important only affects the body element because it is the one with the ID. It does not force child elements to inherit that value. Specificity also becomes irrelevant since your selectors are targeting different elements.

In fact, the !important doesn't play any role in your code and so it should be removed.

다른 팁

The specificy is relevant only when applied to the same element.

Your rules target 3 different elements, so there is no conflict.. each element is drawn according to its own rules..

Read the docs at http://www.w3.org/TR/CSS2/cascade.html#cascading-order

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top