Question

我正在尝试设置活动标签类的样式，但似乎不起作用。背景总是显示为白色。

以下是代码：

<ul class="nav nav-tabs nav-justified">
   <li class="active" id="id1" style="background-color: #234;"><a data-toggle="tab" href="#test1">test1</a></li>
   <li><a data-toggle="tab" id="id2" href="#test2">test2</a></li>
</ul>

<style>
  #id1.active {
      background-color: #123 !important;
    }
</style>

此外，尝试了li > .active，li.active，nav-tabs > li > .active，但似乎没有一个正常工作。

从不介意：背景显示为白色不是因为li元素，而是a元素。我想修改a的样式。这样做：.active > a {..}

Answer 1

如果你要在Bootstrap的CSS文件中搜索.nav-tabs类并向下滚动到那里有.active类状态的行，你会发现{{1}那么这是编辑其背景的正确位置。

注意：：hover和：focus状态也是共享相同的样式正常的活动标签。你也可以将这两者分开并给出一个不同的.nav-tabs > li.active > a风格。

如果您打算设置background-color background-color的样式，结果将是默认的CSS列表（包括所有其他类，如ul li.active {}，.nav-pills等）具有.navbar-nav类状态的颜色将具有相同的背景颜色。

那么你的CSS就是：

.active

Answer 2

如果您使用active，则表示您在ID为#id1的元素中选择了类<li>的元素。相反，您只想要活跃的ul li.active { background-color: #123 !important; }：

li > .active

您的其他尝试的说明：

active表示<li>

li .active

active表示<li>

.nav-tabs > li > .active

<li>与第一个相同，但.nav-tabs是类int yourDayNumber = 9 ; // 1 = Sunday, 2 = Monday, … , 8 = Sunday, 9 = Monday, … int isoNumber = ( ( ( yourDayNumber % 7 ) - 1 ) < 1 ) ? ( 7 + ( ( yourDayNumber % 7 ) - 1 ) ) : ( ( yourDayNumber % 7 ) - 1 ); String output = DayOfWeek.of( isoNumber ).getDisplayName( TextStyle.FULL , Locale.US ) // Or Locale.CANADA_FRENCH or Locale.TAIWAN etc.元素的直接子元素

Here is a list可能的CSS选择器及其含义。

修改活动选项卡类引导程序

2 个答案: