Question

是否可以更改编辑此li菜单的第4个选项卡的css。如果是这样，怎么样？

所有帮助表示赞赏。谢谢！

<div class="rt_tabs clearfix  left tab-style-2" id="single-product-details" data-tab-style="tab-style-2">
  <ul class="tab_nav hidden-xs">
    <li class="tab_title  active" id="tab-1-title" data-tab-number="1"><span class="icon-lightbulb"></span>TAB 1</li>
    <li class="tab_title " id="tab-2-title" data-tab-number="2"><span class="icon-home"></span>TAB 2</li>
    <li class="tab_title " id="tab-3-title" data-tab-number="3"><span class="icon-plus-circled"></span>TAB 3</li>
    <li class="tab_title " id="tab-4-title" data-tab-number="4"><span class="icon-mail-1"></span>TAB 4</li>
  </ul>

Answer 1

如果你想要第4个孩子，你可以使用:nth-child(4)：

.rt_tabs li:nth-child(4) {
  background: #99c;
}

<div class="rt_tabs clearfix  left tab-style-2" id="single-product-details" data-tab-style="tab-style-2">
  <ul class="tab_nav hidden-xs">
    <li class="tab_title  active" id="tab-1-title" data-tab-number="1"><span class="icon-lightbulb"></span>TAB 1</li>
    <li class="tab_title " id="tab-2-title" data-tab-number="2"><span class="icon-home"></span>TAB 2</li>
    <li class="tab_title " id="tab-3-title" data-tab-number="3"><span class="icon-plus-circled"></span>TAB 3</li>
    <li class="tab_title " id="tab-4-title" data-tab-number="4"><span class="icon-mail-1"></span>TAB 4</li>
  </ul>

其他方法（在此特定示例中）：

使用ID：#tab-4-title {}。
使用属性选择器：[data-tab-number="4"] {}。

Answer 2

你的元素已经有了id，所以很容易

#tab-4-title{
        /*Whatever change you want*/
    }

Answer 3

.tab_nav li:nth-child(4)定位li的第4个.tab_nav孩子。或者在这种情况下，.tab_nav li:last-child也应该有用。

有关nth-child的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Answer 4

使用id：

#tab-4-title {...}

使用属性选择器：

[data-tab-number="4"] {...}

使用伪选择器：

li:nth-child(4) {...}
li:last-child {...}
li:nth-last-child(1) {...}
li:last-of-type {...}

还有其他几种可能性。

改变单个li元素的css

4 个答案: