关于选择器的CSS优先级

Question

最近，我正在根据页面https://www.w3.org/wiki/CSS/Training/Priority_level_of_selector研究选择器的CSS优先级，我有一个问题：

* {
  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>

字体颜色应该是蓝色，但它是红色的！这是DEMO

Answer 1

see-me课程确实有灰色背景。由于ul元素是带有see-me类的div的子元素，因此它被绘制在它之上。

Answer 2

因为你看不到见我！

* {
  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>