:last-child 风格工作， :first-child 风格不起作用！为什么？答案

【问题标题】：:last-child style working, :first-child style not working! Why?:last-child 风格工作， :first-child 风格不起作用！为什么？
【发布时间】：2011-03-20 13:57:36
【问题描述】：

我通过使用浅色边框作为段落的顶部边框，使用深色边框作为段落底部的边框，在段落之间创建嵌入边框效果。

我正在尝试使用 p:first-child 删除第一段的顶部边框，并使用 p:last-child 删除底部的边框。（他们有一类“介绍”仅供参考）。

删除 :last-child 底部边框的样式工作正常，但由于某种原因，删除 :first-child 顶部边框的样式不能正常工作。

这一定是一个错字或一些愚蠢的东西，因为我不明白为什么它对最后一个孩子有效，而不是第一个孩子。

http://joelglovier.com

标记：

<div id="intro">

    <div class="wrap">

        <h1 class="intro">Hi! I'm <a href="http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=Joel+Andrew+Glovier">Joel Andrew Glovier</a></h1>

        <p class="intro">I'm a <a href="http://www.jagdesignideas.com/portfolio/web.html">web designer</a> and <a href="http://en.wikipedia.org/wiki/Front_and_back_ends">front-end developer</a>, currently working for <a href="http://cure.org">CURE International</a> full time. I also do some <a href="http://www.jagdesignideas.com">freelance work</a>, I <a href="http://twitter.com/jglovier">tweet a little</a>, <a href="http://www.jagdesignideas.com/blog/">blog</a> & can be found on <a href="http://jagdesignideas.com/contact.html">other social media</a>. I have <a href="http://dribbble.com/players/jag">lots of projects</a> going on at once - and I like it that way.</p>

        <p class="intro">I'm a <a href="/good-news">follower of Jesus</a>, and a proud father and husband. I'm also a <a href="http://www.google.com/images?q=bboy&um=1&ie=UTF-8&source=univ&ei=dOpGTID9JoKKlwfV1vWfBA&sa=X&oi=image_result_group&ct=title&resnum=4&ved=0CDoQsAQwAw&biw=1920&bih=1102">bboy</a>, I <a href="http://jagboards.com/">skateboard</a>, and did I mention that I'm a die-hard <a href="http://www.steelers.com/">Pittsburgh Steelers</a> fan? Oh, and I've been to <a href="http://hmiafrica.org/">Kenya three times</a>.</p>

        <p class="intro">Well it's nice to meet you! now that you know so much about me, <a href="http://twitter.com/home?status=@jglovier%20Hi%20Joel!" target="_blank">why don't you say hi</a>.</p>

    </div><!--/.wrap-->

</div>

CSS

div#intro p:first-child {
  border-top:none;
}
div#intro p:last-child {
  border-bottom:none;
}

【问题讨论】：

标签： css css-selectors

【解决方案1】：

p:first-child 不起作用，因为h1 元素是其对应父元素的第一个子元素； p 元素是第二个、第三个和第四个子元素。改用p:first-of-type 仅选择p 类型的第一个元素。

【讨论】：

<div class="wrap">不是第一个孩子吗？
@animuson，:first-child 应用于p，因此它看起来是否是应用元素父元素的第一个子元素..
我只是将段落包装在一个跨度中，并将跨度定位为 :first-child 而不是弄乱 :first-of-type。不过谢谢你的回答！！！
@animuson：是的，这是#intro 的第一个孩子。但是这里 :first-child 测试每个 p 和 div#intro *:first-child 将匹配 #wrap 和 h1 但不是任何 p。