html - 如何在 HTML 中正确设置样式

Question

我最近开始学习/练习 HTML、typescript、CSS 和 angular5，我正在开发一个测试应用程序来尝试我到目前为止学到的东西。但是我对如何解决这个问题有点困惑:

基本上我需要设置元素内文本的颜色(下拉按钮文本的颜色必须与菜单文本的颜色不同)。

<ul class="nav navbar-nav ">
  <li class="dropdown" appDropdown>
    <a href="#" class="dropdown-toggle" role="button">drop1<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
    </ul>
  </li>
</ul>

我想要白色的“drop1”文本，而“menu”元素文本可以是默认颜色。

现在如果我把这个放在 CSS 中:

ul li a {
  color: white;
}

每个文本都是白色的。现在我知道我可以直接在 HTML 标记中设置样式属性来覆盖 CSS 中的样式，但是由于我有几个下拉菜单，所以我想在 CSS 中设置所有内容。我该怎么做？

Answer 1

尝试使用> css 选择器使用像

这样的类

ul.navbar-nav>li>a

它将选择所有 <a>父级为 .navbar-nav 的元素类

堆栈片段

ul.navbar-nav>li>a {
  color: white;
  background: red;
}

<ul class="nav navbar-nav">
  <li class="dropdown" appDropdown>
    <a href="#" class="dropdown-toggle" role="button">
        drop1
        <span class="caret">
        </span>
      </a>
    <ul class="dropdown-menu">
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
    </ul>
  </li>
</ul>

另一个解决方案是使用 :not伪类

堆栈片段

ul:not(.dropdown-menu)>li>a {
  color: white;
  background: red;
}

<ul class="nav navbar-nav">
  <li class="dropdown" appDropdown>
    <a href="#" class="dropdown-toggle" role="button">
        drop1
        <span class="caret">
        </span>
      </a>
    <ul class="dropdown-menu">
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
    </ul>
  </li>
</ul>

引用链接

• > child-selector
• > :not() selector