Question

我最近刚开始学习/练习HTML，打字稿，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个元素

Stack Snippet

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Stack Snippet

＆＃13;

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

＆＃13;

<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>

＆＃13;

参考链接

Answer 2

您可以尝试这个简单的想法：

<ul class="nav navbar-nav ">
  <li class="dropdown" appDropdown>
    <a href="#" class="dropdown-toggle white-text" 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>

使用此CSS

.white-text {
  color: white!important;
}

这意味着如果您需要将文字设为白色，则可以在整个网站中使用此课程

修改

如果您担心在类中使用!important，您可以删除它，但只需确保该类是类堆栈中的最后一个条目，例如：

<a href="#" class="dropdown-toggle white-text" role="button" >

而不是

<a href="#" class="white-text dropdown-toggle" role="button" >

Answer 3

定位元素的类。

.dropdown-toggle {
  color: black; // all your toggle menu (main menu) will have a black color;
}

.dropdown-menu a {
  color: white; // all your dropdown menu (sub menu) will have a white color;
}

请勿使用!important;

Answer 4

您可以使用CSS文件或使用HTML标记内的style=""元素。

即：第一种方式：<button style="color: red; background-color: green;">Log in</button>

第二种方式：

HTML文件：

<button class="mybtn">Log in</button>

CSS文件：

.mybtn {
  color: red;
  background-color: green;
}

您对所有标签以及想要设计样式的所有元素都这样工作。

如何在HTML中正确样式

4 个答案: