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 first-child selector :

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