使用CSS设置第四个实例的样式
使用CSS设置第四个实例的样式
提问于 2012-05-24 18:02:05
我用一段代码创建了四个选项卡，我想让第四个选项卡具有不同的样式。不幸的是，没有单独分配给列表元素的特定类或is，也没有简单的方法来实现这一点。
是否可以仅使用CSS设置list对象的第四个实例的样式？
这是一个由脚本创建的编码示例：
<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
Stack Overflow用户
回答已采纳
发布于 2012-05-24 18:03:58
您可以在选择器中使用:nth-child伪类：
ul li:nth-child(4) { /* ... */ }Browser support是好的；IE <9是唯一的(诚然不是无关紧要的)问题。
Stack Overflow用户
发布于 2012-05-24 18:16:53
ul li:first-child + li + li + li这可能是你在这种情况下能得到的最好的浏览器覆盖率。
Stack Overflow用户
发布于 2012-05-24 18:06:16
在较新的浏览器上，您可以这样做
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 */ }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10735247
复制相关文章
相似问题
腾讯云开发者
