:last-child风格工作,:first-child风格不工作!为什么? [英] :last-child style working, :first-child style not working! Why?
问题描述
我在段落之间创建了一个插入边框效果,方法是使用浅色边框作为段落的边框顶部,并使用黑色边框作为边框底部。
I'm creating an inset border effect between paragraphs by using a light border as the border-top on the paragraphs, and a dark border as the border bottom on them.
我尝试使用p:first-child删除第一个段落的顶部边框,p:last-child删除底部边框的顶部边框。 (他们有一个类introfyi)。
I'm trying to use p:first-child to remove the top border on the first paragraph, and p:last-child to remove the border on the bottom one. (they have a class of "intro" fyi).
删除下边框的样式:last-child正常工作,但由于某种原因要删除顶边框上:第一个孩子不是。
The style to remove the bottom border on the :last-child is working properly, but for some reason the style to remove the top border on the :first-child is not.
它必须是拼写错误或愚蠢的,因为我不知道为什么它是为最后一个孩子而不是第一个孩子。
It must be a typo or something silly because I can't figure out why it is working for the last-child but not the first-child.
标记:
<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;
}
推荐答案
p:first-child
不工作,因为 h1
元素是其相应父元素的第一个子元素; p
元素是第二,第三和第四个子元素。使用 p:first-of-type
,而只选择 p
类型的第一个元素。
p:first-child
does not work because the h1
element is the first child of its corresponding parent element; the p
elements are the second, third and fourth child elements. Use p:first-of-type
instead to only select the first element of the type p
.
这篇关于:last-child风格工作,:first-child风格不工作!为什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!