About CSS priority level of selector

Question

Recently, I am studying CSS priority level of selector according to the page: https://www.w3.org/wiki/CSS/Training/Priority_level_of_selector, I have one problem:

* {
  margin: 0;
  padding: 0;
}
.see-me,
ul li {
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
/* [0,0,0,2] */

ul li {
  background: yellow; color: red;
}
/* [0,0,10,0] */

.see-me {
  background: gray; color: blue;

}

<div class="see-me">
  <ul>
    <li>.see-me has higher priority level [0,0,10,0], so why is font color not blue, but red ?</li>
  </ul>
</div>

font color should be blue, but it is red ! here is DEMO

`.see-me` is grey it's just hidden by the `li`. Inspect the HTML and you'll see. — imtheman, Jul 13 '16 at 18:16
but, if you put ul li { background: yellow; color: red; } and .see-me { background: gray; color: blue; } you will see, the font color also did not changed! — jian zhou, Jul 13 '16 at 18:18
You're misunderstanding how CSS selectors work. If you put the .see-me class on the li instead of the div, then you'd see that. — j08691, Jul 13 '16 at 18:25
I know your meaning, but if so, why need to count selector's number according to w3c site? if count selector's number can not applied to all selector, why we need to study it ? — jian zhou, Jul 13 '16 at 18:29
in fact, CSS priority level of selector is not very usful, this is my conclusion.. ^^ thanks! — jian zhou, Jul 13 '16 at 18:49
CSS priority level of selector should base on the same tag. if so, the nearest one will have higher level, good luck! — Fresh Lover, Jul 13 '16 at 20:37

score 1 · Answer 1 · answered Jul 13 '16 at 18:17

1

The see-me class does in fact have a gray background. Since the ul element is a child of the div with the see-me class it is drawn on top of it.

answered Jul 13 '16 at 18:17

Matt Wisniewski

91
8

but, if you put ul li { background: yellow; color: red; } and .see-me { background: gray; color: blue; } you will see, the font color also did not changed! – jian zhou Jul 13 '16 at 18:18
https://jsfiddle.net/8eeprjdf/2/ here is my update.. if so, is it not belongs to CSS priority level of selector ? – jian zhou Jul 13 '16 at 18:19

score 0 · Answer 2 · answered Jul 13 '16 at 18:19

Because you couldn't see see-me!

* {
  margin: 0;
  padding: 0;
}
.see-me,
ul li {
  width: 100%;
  border: 1px solid red;
}
/* [0,0,0,2] */

ul li {
  background: yellow;
}
/* [0,0,10,0] */

.see-me {
  height:300px;
  background: gray;
}

<div class="see-me">
  <ul>
    <li>.see-me has higher priority level [0,0,10,0], so why is background not gray, but yellow ?</li>
  </ul>
</div>

About CSS priority level of selector

2 Answers2