使用 CSS 设置第四个实例的样式

Question

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

\n\n

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

\n\n

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

\n\n

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

\n

Answer 1

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

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

浏览器支持良好；IE < 9 是唯一的（诚然不是微不足道的）问题。