为我列表中的最后 5 里设置样式答案

【问题标题】：Styling the last 5th li in my list为我列表中的最后 5 里设置样式
【发布时间】：2014-05-21 22:43:01
【问题描述】：

我在 wordpress 上运行这个网站，列表是由插件生成的，但是我似乎无法更改最后一个 li 标签上的任何样式。

HTML

<div class="home">
    <p></p>
    <h4><li><a class="wp-super-faq-question-closed" id="wp-super-faq-question--0" href="http://www.statics-wanted.co.uk/statics4cash/?wp_super_faq=earn-an-extra-750-for-your-static-genuine-additional-bonus" title="…Earn an Extra £750* for your static, Genuine Additional Bonus!!!”" rel="question"><span class="wp-super-faq-triangle">▶</span> …Earn an Extra £750* for your static, Genuine Additional Bonus!!!”</a></li></h4>
    <div class="wp-super-faq-answer" id="wp-super-faq-question--0-answer" style="zoom: 1; display: none;">Enter answer here</div>
    <h4><li><a class="wp-super-faq-question-closed" id="wp-super-faq-question--1" href="http://www.statics-wanted.co.uk/statics4cash/?wp_super_faq=you-want-to-sell-your-static-fast-and-for-as-much-as-possible" title="“…You want to sell your static FAST and for as much as possible.”" rel="question"><span class="wp-super-faq-triangle">▶</span> “…You want to sell your static FAST and for as much as possible.”</a></li></h4>
    <div class="wp-super-faq-answer" id="wp-super-faq-question--1-answer" style="zoom: 1; display: none;">Enter answer here</div>
    <h4><li><a class="wp-super-faq-question-closed" id="wp-super-faq-question--2" href="http://www.statics-wanted.co.uk/statics4cash/?wp_super_faq=85-of-customers-received-more-money-by-using-us" title="“…85% of customers received more money by using us.”" rel="question"><span class="wp-super-faq-triangle">▶</span> “…85% of customers received more money by using us.”</a></li></h4>
    <div class="wp-super-faq-answer" id="wp-super-faq-question--2-answer" style="zoom: 1; display: none;">Enter answer here</div>
    <h4><li><a class="wp-super-faq-question-closed" id="wp-super-faq-question--3" href="http://www.statics-wanted.co.uk/statics4cash/?wp_super_faq=we-have-over-98-customer-satifaction" title="“…We have over 98% customer satifaction.”" rel="question"><span class="wp-super-faq-triangle">▶</span> “…We have over 98% customer satifaction.”</a></li></h4>
    <div class="wp-super-faq-answer" id="wp-super-faq-question--3-answer" style="zoom: 1; display: none;">Enter answer here</div>
    <h4><li><a class="wp-super-faq-question-closed" id="wp-super-faq-question--4" href="http://www.statics-wanted.co.uk/statics4cash/?wp_super_faq=last-year-we-spent-over-1million-buying-static-caravans" title="…Last year we spent over £1million buying Static Caravans" rel="question"><span class="wp-super-faq-triangle">▶</span> …Last year we spent over £1million buying Static Caravans</a></li></h4>
    <div class="wp-super-faq-answer" id="wp-super-faq-question--4-answer" style="zoom: 1; display: none;">Enter answer here</div>
    <p></p>
</div>

CSS

.home li {
    list-style:url(../images/fact.png);
}
.home h4 li:nth-child(5) {
    padding-top:20px
}

JSFiddle Link

非常感谢

【问题讨论】：

为什么要把li 标签放在h4 标签里面？这不是有效的 HTML！当我在 W3C 验证器中验证您的 HTML 时，我收到此错误 5 次：Element li not allowed as child of element h4 in this context. (Suppressing further errors from this subtree.) A li 标记必须是 ul 或 ol 列表的元素！
我明白，但这不是这里的问题，请保持主题。
您的 HTML 完全错误，这就是您的 CSS 无法正常工作的原因。 CSS Pseudo-classes 不适用于此类 HTML。它需要像这样jsfiddle.net/7ky4z/8 P.S @ProgramFOX 的正确格式。

标签： wordpress css html-lists

【解决方案1】：

问题在于 li 不是第 n 个孩子，它们都在 <h4> 元素中。如果你使用：

.home h4:nth-child(10) li {padding-top: 20px;}

这应该可以解决问题

【讨论】：

哦，谢谢，我会试试看，如果正确，我会接受你的遮阳篷。

【解决方案2】：

你可以创建一个css类

li.last-item { /* ... */ }

并将其应用于您的最后一个列表项。

【讨论】：