Question

我在CSS中需要帮助我的页脚。

我是一个新的wordpress开发人员，我得到了如何使用它的要点，但像往常一样，我遇到了一个问题，它可能也很简单，因为我不确定如何挑选出某些问题。我需要的CSS片段。我使用Firebug，但有时我不确定我的CSS会发生什么。

这是我的测试网站，所以你可以看看我将要谈论的内容。在我的页脚中，我的最后一个＆lt; li>元素（Archives）我希望在Follow Us下面站起来。我总是可以使用最后一个子css规则，但我知道IE忽略了这一点。那么我的下一个选择是什么？我知道如果wordpress给出了单独的样式列表该怎么办但在这种情况下它没有，所以我不知道该怎么做。

CSS

#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px;/*border: 1px solid #0C0;*/}
.footer-widgets { width: 960px; margin: 0px auto; padding: 0px; /*border: 1px solid #fff;*/ }
.footer-widgets li { width:280px; height: auto; list-style-image: none; list-style-position: outside; list-style-type: none; float: left; color: #fff; padding: 13px; margin-right: 10px; /*border: 1px solid #fff;*/ }
.footer-widgets li ul {color: red;}
.footer-widgets li ul li {color: #fff; margin-left: -50px; margin-top: -15px;}

使这项工作的最佳方法是什么？任何帮助表示赞赏！

Answer 1

如果您需要支持不接受:last-child选择器的浏览器，那么您有两种选择。

手动将一个类添加到最后一个元素并设置其样式。
使用javascript查找最后一个<li>并添加一个类，然后设置样式。

<强> [编辑] 不幸的是，IE8 / 7中也不支持W3C Traversal Spec中引入的非常方便的lastElementChild。这让你有两个选择。

使用像jQuery这样的库，它有非常简单的$('.footer-widgets li:last-child')选择器
使用常规js并通过繁琐的DOM遍历找到元素。

我会说使用jQuery这件事很傻，但是如果你要在你的网站上做其他javascript的东西，不妨使用jQuery，对吧？否则，我会远离DOM遍历，因为它只是一个痛苦。只需手动将一个班级放在最后<li>上并完成它：）

Answer 2

我看到有两种选择：

在最后一个元素中添加一个类，并使用JavaScript进行自己的操作。
使用jQuery获取嵌套元素（我认为不必要）。

示例：

$('.yourElement').css('property', 'value')

补：

使用JavaScript获取任何元素：

  var x = document.getElementById("id");

我建议你看一下this W3C documentation的例子。在您获得带有JavaScript的元素之后，无论如何都需要操作。

我认为它可以帮到你！

让最后一个<li>元素以我想要的方式工作</li>

2 个答案: