LI 元素上的文本颜色不会改变答案

【问题标题】：Text color won't change on LI elementsLI 元素上的文本颜色不会改变
【发布时间】：2021-06-09 12:56:24
【问题描述】：

正如您在我的代码中看到的，在左侧面板上，我有一个 UL 和 2 个 LI。

我希望所有的 LI 都是白色的。

我定了风格但不专业，也许是我自己定的风格：

lblBiancoMenu 不影响

我能做什么？

.lblBiancoMenu {
  color: white;
}

;
.subCat .li {
  color: white;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Pushy - Off-Canvas Navigation Menu</title>
  <meta name="description" content="Pushy is an off-canvas navigation menu for your website.">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


  <!-- Icons list-> https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp-->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

</head>

<body>


  <div data-role="page" id="pageone">

    <div style=" background-color: #101010;  color: #ffffff;">
      <h2 id="listCateg">Categories</h2>


      <div id="SubCat3" class='subCat'>
        <ul>
          <li><a style="color:white" href="#">3</a></li>
          <li><a class="lblBiancoMenu" href="#">4</a></li>
        </ul>
      </div>
    </div>





  </div>


</body>


</HTML>

【问题讨论】：

标签： css css-selectors

【解决方案1】：

您要导入的主题具有自己的 CSS 样式。正在导入的颜色规则的 specificity 高于您的规则，因此您的规则将被覆盖。

要覆盖主题样式，请使用内联 CSS（如您所做的那样）。将 CSS 嵌入 HTML 标记可使其具有更高的特异性。

或者使用 !important 注释，它会覆盖所有其他 CSS 声明。

在您的代码中使用它：

.lblBiancoMenu {
  color: white !important;
}

.lblBiancoMenu {
  color: white !important;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Pushy - Off-Canvas Navigation Menu</title>
  <meta name="description" content="Pushy is an off-canvas navigation menu for your website.">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


  <!-- Icons list-> https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp-->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

</head>

<body>


  <div data-role="page" id="pageone">

    <div style=" background-color: #101010;  color: #ffffff;">
      <h2 id="listCateg">Categories</h2>


      <div id="SubCat3" class='subCat'>
        <ul>
          <li><a style="color:white" href="#">3</a></li>
          <li><a class="lblBiancoMenu" href="#">4</a></li>
        </ul>
      </div>
    </div>





  </div>


</body>


</html>

【讨论】：