0

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

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

这是我的测试站点，因此您可以查看我将要谈论的内容。在我的页脚中，我的最后一个 < li > 元素（档案）我希望能在 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;}

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

4

2 回答 2

2

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

  1. 手动将类添加到最后一个元素并为其设置样式。

  2. 使用javascript查找最后一个<li>并添加一个类，然后对其进行样式设置。

[编辑] 不幸的是，在W3C 遍历规范lastElementChild中引入的非常方便的功能在 IE8/7 中也不支持。这又给你留下了两个选择。

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

I would say it's silly to use jQuery for this one thing, but if you will be doing other javascript stuffs on your site, might as well use jQuery, right? Otherwise, I would stay away from the DOM traversal as it's just a pain. Just manually put a class on the last <li> and be done with it :)

于 2012-04-11T18:47:04.820 回答
0

There are 2 alternatives I see:

  1. Add a class to your last element and take it with JavaScript to do your own manipulation.

  2. Use jQuery to get the nested elements (unnecessary I think).

    Example:

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

Complement:

Getting any element with JavaScript:

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

I suggest you to take a look at this W3C documentation with an example. Right after you get the element with JavaScript comes manipulation anyway you need it.

I think it may help you!

于 2012-04-11T18:49:27.857 回答