覆盖 CSS 属性

Question

我想我忽略了一些东西。我有这段代码，我试图更改列表元素文本的颜色以表示它处于非活动状态。第二种风格不应该优先于第一种风格吗？ Inspector 说非活动样式比 menu_simple ul li a.

更受欢迎

代码如下：

.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;
}

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

这都是关于 Specificity、

The concept

Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.

How is it calculated?

The specificity is calculated on the concatenation of the count of each selectors type. It is a weight that is applied to the corresponding matching expression.

In case of specificity equality, the latest declaration found in the CSS is applied to the element.

Some rules of thumb

Never use !important on site-wide css.

Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).

Never use !important when you're writing a plugin/mashup.

Always look for a way to use specificity before even considering !important

可以用4列优先级表示：

inline = 1|0|0|0

id = 0|1|0|0

class = 0|0|1|0

element = 0|0|0|1

Left to right, the highest number takes priority.

所以你只需要这样做:

.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 属性

Overriding CSS property

html

css

css-specificity

The concept

How is it calculated?