html - 更改单个 li 元素的 css

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

你可以使用:nth-child(4)，如果你想要任何东西的4th child:

.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"] {}。