html - css 选择器，带有子元素（及其子元素）的父元素

Question

谁能解释为什么这不起作用？在div> ol :first-child上？

div>ul:first-child
{
    background:yellow;
}

顶部的样式适用于 ul。高亮它。如果我将 >ul 更改为 >ol.. 没有任何反应

<div>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
</div>

http://jsfiddle.net/mFMuq/

Answer 1

来自 w3schools.com的第一个孩子选择器：

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

ol 不是它的父母的第一个孩子，实际上它是它的父母的第一个 ol 并不重要。如果您交换 ol 和 ul ，则 ol 有效，但 ul 无效。

如果你想定位第一个 ol 然后使用 :first-of-type 选择器。JSFiddle