0

我有四个由一段代码创建的选项卡，我想以不同的方式设置第四个选项卡的样式。不幸的是，没有为列表元素单独分配特定的类或 ID，也没有简单的方法来实现这一点。

是否可以单独使用 CSS 设置列表对象的第四个实例的样式？

这是脚本创建的编码示例：

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
   <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-5310-0-0">Description</a></li>
   <li class="ui-state-default ui-corner-top"><a href="#tabs-5310-0-1">Features</a></li>
   <li class="ui-state-default ui-corner-top"><a href="#tabs-5310-0-2">Specification</a></li>
   <li class="ui-state-default ui-corner-top"><a href="#tabs-5310-0-3">360° Interactive Virtual View</a></li>
</ul>
4

4 回答 4

4

您可以:nth-child在选择器中使用伪类：

ul li:nth-child(4) { /* ... */ }

浏览器支持好；IE < 9 是唯一（诚然并非无关紧要）的问题。

于 2012-05-24T10:03:57.657 回答
2 
ul li:first-child + li + li + li

This probably has the best browser coverage you can get in this situation.

于 2012-05-24T10:16:52.917 回答
0

在较新的浏览器上你可以做

ul li:nth-child(4);

在较旧的浏览器 ( IE7/8) 上，您可以为

ul li + li + li + li { /* assign a style */ }

然后在下一个列表项上恢复它

ul li + li + li + li + li { /* revert the previous style */ }
于 2012-05-24T10:06:15.667 回答
0

如果您更喜欢最后一项而不是第四项，您可以选择使用nth-last-childor last-child：

ul li:nth-last-child(1) { ... };

或者

ul li:last-child { ... };
于 2012-05-24T10:06:59.080 回答