logo标签列表

:last-child样式起作用，而:first-child样式不起作用！为什么？

csscss-selectors
11
我正在创建一个段落之间的插入边框效果，通过在段落的上部使用浅色边框作为border-top，在它们的下部使用深色边框作为border-bottom。
我试图使用p:first-child来移除第一个段落的顶部边框，p:last-child来移除底部的边框（它们有一个名为“intro”的类）。
删除:last-child底部边框的样式正常工作，但由于某些原因，删除:first-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;
}
1个回答
27

p:first-child选择器无法生效是因为对应父元素的第一个子元素是h1元素，而p元素是第二、三和四个子元素。可以使用p:first-of-type选择器，只选中第一个类型为p的元素。

<div class="wrap"> 不是第一个子元素吗？ - animuson
2
@animuson，:first-child被应用于p上，因此它看起来像是应用元素的父级中的第一个子元素。 - Gabriele Petrioli
我只是将段落包装在一个 span 中，并针对该 span 进行了 :first-child 的定位，而不是使用 :first-of-type。但还是感谢你的回答！！！ - Joel Glovier
2
@animuson：是的，那是#intro的第一个子元素。但是这里:first-child被用于每个p和div#intro *:first-child会匹配到#wrap和h1，但不会匹配任何p。 - Gumbo
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接