Question

我想我忽视了一些事情。我有这个代码，我试图改变列表元素文本的颜色，以表示它是不活动的。难道第二种风格不应先于第一种风格吗？ Inspector表示非活动样式优先于menu_simple ul li a。

以下是代码：

＆＃13;

.menu_simple ul li a {
  color: #FFF;
  padding: 0px;
  margin: 0px;
  background-color: #262831;
  display: block;
  width: 240px;
  height: 68px;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  font-size: 30px;
  z-index: 99999;
}

.inactive{
    color: #333333;
}

＆＃13;

  <div class="menu_simple">
  <ul>
  <li><a href="#">Java</a></li>
  <li><a class="inactive">Python</a></li>
  <li><a class="inactive">C</a></li>
  <li><a class="inactive">Ruby</a></li>
  <li><a class="inactive">Javascript</a></li>
  <li><a class="inactive">C#</a></li>
  <li><a class="inactive">PHP</a></li>
  <li><a class="inactive">Objective C</a></li>
  <li><a class="inactive">SQL</a></li>
  <li><a class="inactive">CSS</a></li>
  <li><a class="inactive">Perl</a></li>
  <li><a class="ion-ios-plus-outline" href="#"></a></li>



  </ul>
  </div>

＆＃13;

Answer 1

这完全是关于Specificity，

概念

特定性是浏览器决定哪个属性的方法   值与元素最相关并且可以应用。   特异性仅基于由组成的匹配规则   选择不同的种类。

如何计算？

特异性是根据计数的连续计算的   每个选择器类型。它是一个适用于的重量   相应的匹配表达式。

在特异性相等的情况下，CSS中的最新声明将应用于元素。

一些经验法则


从不在网站范围内使用！important。

仅在页面特定的css上使用！important来覆盖网站范围或外部css（例如来自ExtJs或YUI）。

从不使用！在编写插件/ mashup时非常重要。

始终在考虑！important
之前，寻找一种使用特异性的方法

可以由4列优先级表示：

内联 = 1 | 0 | 0 | 0

id = 0 | 1 | 0 | 0

类 = 0 | 0 | 1 | 0

元素 = 0 | 0 | 0 | 1

从左到右，最高的数字优先。

所以你必须这样做：

.menu_simple ul li a {
  color: #FFF;
  padding: 0px;
  margin: 0px;
  background-color: #262831;
  display: block;
  width: 240px;
  height: 68px;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  font-size: 30px;
  z-index: 99999;
}

.menu_simple ul li a.inactive{
    color: #333333;
}

<div class="menu_simple">
  <ul>
  <li><a href="#">Java</a></li>
  <li><a class="inactive">Python</a></li>
  <li><a class="inactive">C</a></li>
  <li><a class="inactive">Ruby</a></li>
  <li><a class="inactive">Javascript</a></li>
  <li><a class="inactive">C#</a></li>
  <li><a class="inactive">PHP</a></li>
  <li><a class="inactive">Objective C</a></li>
  <li><a class="inactive">SQL</a></li>
  <li><a class="inactive">CSS</a></li>
  <li><a class="inactive">Perl</a></li>
  <li><a class="ion-ios-plus-outline" href="#"></a></li>



  </ul>
  </div>

Answer 2

试试这个

.menu_simple ul li a.inactive {  color: #333333; }

覆盖CSS属性

2 个答案:

概念

如何计算？