时间戳

首页 > 解决方案 > LI 元素上的文本颜色不会改变

css - LI 元素上的文本颜色不会改变

问题描述

正如您在我的代码中看到的那样，在左侧面板上，我有一个 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>

标签： csscss-selectors

解决方案

您要导入的主题有自己的 CSS 样式。导入的颜色规则比您的规则具有更高的特异性，因此您的规则被覆盖。

在此处输入图像描述

要覆盖主题样式，请使用内联 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>

推荐阅读