css - 处理类型选择器和类选择器的优先级

Question

我在 sass 中设计了一个列表，编译如下: http://codepen.io/anon/pen/mErCD

.thisdiv ul li {
  background-color: #ddd;
  margin-bottom: 1em;
  height: 2em;
}

.current {
  background-color: blue;
  list-style: square;
  height: 5em;
}

.current 中会有一些样式变化，以供以后用于jquery，但无法覆盖“.thisdiv ul li”。

"!important"和 ".thisdiv .current {...}"可以，但根据许多文章，它们并不那么受欢迎。在这种情况下“.thisdiv .current {...}”是必须的吗？

Answer 1

选择器特异性

确定specificity values时有一个重要的顺序在 CSS 选择器中

在标记和 css 中将 .current 更改为 #current。 ID 的排名高于类(class) - jsFiddle Example

---

来自 Mozilla 开发者网络 - 特异性:

从最低到最高

• Universal selectors
• Type selectors
• Class selectors
• Attributes selectors
• Pseudo-classes
• ID selectors
• Inline style

!important 覆盖上面的内容