html - 如何为第三个 div 类 span8 的最后一个 <p> 元素应用 CSS 更改

Question

我需要为最后一个 <p> 应用 CSS 更改第三元素<div class="span8">不使用 jQuery。

HTML

<div class="span8">
    <p>Some text.</p>
    <p>This collection includes video, audio and essays.</p>
    <p class="last">Visit now</p>
    <div>Something else</div>
</div><br/>

<div class="span8">
    <p>Some text.</p>
    <p>This collection includes video, audio and essays.</p>
    <p class="last">Visit now</p>
    <div>Something else</div>
</div><br/>

<div class="span8">
    <p>Some text.</p>
    <p>This collection includes video, audio and essays.</p>
    <p class="last">Visit now</p>
    <div>Something else</div>
</div><br/>

CSS

div.span8>p:nth-of-type(2n+1) {
    font-style: bold;  
}

输出

一些文本。 该合集包括视频、音频和论文。 立即访问 别的东西

一些文本。 该合集包括视频、音频和论文。 立即访问 别的东西

一些文本。 This collection includes video, audio and essays. 立即访问(这一项需要加粗。) 别的东西

Answer 1

您可以通过向第 3 个 <div class="span8"> 添加一个类来完成此操作像这样:

<div class="span8">
    ...
</div>

<div class="span8">
    ...
</div>

<div class="span8 boldClass">
    ...
</div>

你的 CSS 是这样的:

.boldClass > p:nth-child(3) {
    border:2px solid #ff0000;
    padding:10px;
    font-weight: 600;
}

Jsfiddle Example here

==============更新================

或者，在执行此操作的第二种方法中，您可以像这样创建同样的东西:

.span8:nth-child(3) > p:nth-child(3) {
    border:2px solid #ff0000;
    padding:10px;
    font-weight: 600;
}

但还需要删除所有的<br />从你的代码。我不知道为什么，但是这些中断在使用 .span8:nth-child(3) > p:nth-child(3) 时破坏了代码(明白了吗？!:P)

虽然没有使用 <br />你可以在 .span8 中添加一个 margin-bottom然后在最后一个 div 上删除它

.span8{
    margin-bottom:15px;
}
.span8:last-child {
    margin-bottom:0;
}

这是一个 example