更改单个元素的css

Question

是否可以更改编辑此菜单的第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

您可以使用:nth-child(4)，在万一你要的东西的第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>

其他方法可以做到（在这个特殊的例子）：

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

Answer 2

你的元素已经一个ID，所以它很容易

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

Answer 3

.tab_nav li:nth-child(4)目标4 li孩子的.tab_nav。或者在这种情况下，.tab_nav li:last-child也应该起作用。

在第n个孩子的更多信息：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 {...} 

还有其他几种可能性。