如何选择父元素的第一个和最后一个子元素？

Question

如何选择此的第一个和最后一个孩子。那么选择了<ul>和最后<p>？

<blockquote>
  <ul></ul>
  <p></p>
  <p></p>
  <p></p>
</blockquote>

我认为这样可行：

blockquote:first-child {...}
blockquote:last-child {...}

但是只选择blockquote元素？感谢。

Answer 1

您需要使用后代组合子（blockquote和:first-child伪类之间的空格：

blockquote :first-child {...}
blockquote :last-child {...}

JS Fiddle demo

按照说明，您的选择者选择的blockquote本身就是:first-child，和 blockquote本身就是{{1}它的父元素。

参考文献：

• CSS Selectors。