Html CSS最后一个子选择器不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10660180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS last-child selector not working
提问by Olly F
I'm trying to apply styles to the last <p>in a div. I'd like to do so without adding a new class (or ID).
我正在尝试将样式应用于<p>div 中的最后一个。我想在不添加新类（或 ID）的情况下这样做。
I've tried using the last-child selector but it's not working.
我试过使用 last-child 选择器，但它不起作用。
I have even tried declaring p:last-child {font-style: italic;}for all of my CSS document and this doesn't seem to have any effect.
我什至尝试p:last-child {font-style: italic;}为我的所有 CSS 文档声明，但这似乎没有任何效果。
Here's my HTML:
这是我的 HTML：
<div class="new-section">
<div class="collection-container">
<div class="container">
<div class="row">
<div class="title span16">
<h1>The Title</h1>
</div>
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
<div class="arrow-right"></div>
</div>
</div>
</div>
</div>
</div>
And here's my LESS CSS:
这是我的 LESS CSS：
.collection-container {
height: 200px;
position: relative;
background-color: @gray;
.container {
padding-top: @r-margin;
.title {
margin-bottom: @xs-margin;
}
.span8 p:last-child {
font-style: italic;
}
}
}
采纳答案by Brad
Here's a working example after I have removed the redundant code to show you how it works http://jsfiddle.net/RDpcM/1/
这是我删除冗余代码后的一个工作示例，向您展示它是如何工作的http://jsfiddle.net/RDpcM/1/
It's alwaysa good idea to format your code and try to break out the bits that matter when trying to debug. It's very easy to get a closing bracket wrong and it all goes pear shaped.
它总是一个好主意，格式化你的代码，并尝试突破尝试调试时重要的位。很容易弄错一个右括号，而且都是梨形的。
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
</div>
div p:last-child {
font-style: italic;
border:solid 1px blue;
}
?
[EDIT - using JQuery]
[编辑 - 使用 JQuery]
If you have other elements in div.span8 and don't know the number of elements up front you can introduce some jquery to achieve the desired affect.
如果您在 div.span8 中有其他元素并且不知道预先的元素数量，您可以引入一些 jquery 来实现所需的效果。
Here's another fiddle: http://jsfiddle.net/VPbv2/
这是另一个小提琴：http: //jsfiddle.net/VPbv2/
or this will work as a standalone example for you to try out. JQuery dynamically sets the mySelectedclass when the document loads.
或者这将作为一个独立的示例供您试用。JQuerymySelected在文档加载时动态设置类。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.mySelected {
font-style: italic;
border:solid 1px blue;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("div.span8 > p:last").addClass("mySelected");
});
</script>
</head>
<body>
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
<div>xxx</div>
</div>
</body>
</html>
[EDIT - non JQuery]
[编辑 - 非 JQuery]
You pointed out that the original answer will not work when you have this code
您指出当您拥有此代码时，原始答案将不起作用
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
<div> another non-P tag that will mess up the p:last-child selector</div>
</div>
So you have to make sure you don't have any other siblings for your <p>tags by wrapping them in an extra div like this
因此，您必须<p>通过将它们包装在这样的额外 div 中来确保您的标签没有任何其他兄弟姐妹
<div class="span8">
<div class="only-for-p">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
</div>
<div> this non-P tag no longer messes with the p:last-child selector</div>
</div>
回答by Alf Eaton
It seems like this would be an appropriate place to use :last-of-type, to select the last pin its parent element:
似乎这将是一个合适的地方使用:last-of-type，选择p其父元素中的最后一个：
.span8 p:last-of-type {
font-style: italic;
}
回答by Kris Hollenbeck
I think your syntax is wrong. Should be...
我认为你的语法是错误的。应该...
.span8 p:last-child {font-style: italic;}
You are missing the period..
你错过了这个时期..
Also if you aren't concerned about using CSS3 you could do...
另外，如果您不担心使用 CSS3，您可以这样做...
.span8 p:nth-child(3) { }
This is useful for getting those middle elements.
这对于获取那些中间元素很有用。
回答by Subbu
In your case, you need to use either p:lastor p:last-of-typeselector, because last child of div.span8 is div.arrow-right and not p
在您的情况下，您需要使用p:last或p:last-of-type选择器，因为 div.span8 的最后一个孩子是 div.arrow-right 而不是 p
回答by Yogi
your css is not working as p tag is not the last child of span8.
if you change
.span8 p:last-child {font-style: italic;}to
.span8 p:nth-last-child(2) {font-style: italic;}it will work
您的 css 无法正常工作，因为 p 标签不是 span8 的最后一个孩子。如果你改变
.span8 p:last-child {font-style: italic;}到
.span8 p:nth-last-child(2) {font-style: italic;}它的工作
回答by Yogi
div.span8 p:last-child { font-style:italic; }
