HTML 元素层次结构答案

【问题标题】：HTML Element HierarchyHTML 元素层次结构
【发布时间】：2017-02-14 11:52:07
【问题描述】：

我想通过使用单独的 CSS 文件来更改标题的颜色。我的样式代码如下：

<ul class="nav nav-tabs">
        <li><a href="#Organization" data-toggle="tab">Organization</a></li>

这是样式代码：

 .ul .nav .nav-tabs .li .a{
 color:red;
 }

请帮忙。我找不到正确的方法

【问题讨论】：

【解决方案1】：

您不必将类点放在所有选择器上 - 而且您也没有关闭 </ul> - 尽管这可能是这里的错字。：

ul.nav.nav-tabs li a{color:red;}

<ul class="nav nav-tabs">
        <li><a href="#Organization" data-toggle="tab">Organization</a></li>
</ul>

【讨论】：

【解决方案2】：

使用这个 -

 ul.nav.nav-tabs > li > a

而不是

 .ul .nav .nav-tabs .li .a

因为ul、li、a是标签，所以不需要点前缀

【讨论】：

【解决方案3】：

使用这个 CSS

.nav.nav-tabs li a {
 color:red;
}

【讨论】：

【解决方案4】：

ul a:first-child{color:red;}

<ul class="nav nav-tabs">
        <li><a href="#Organization" data-toggle="tab">Organization</a></li>
</ul>

【讨论】：