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

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，但它无法覆盖＆＃34; .thisdiv ul li＆＃34;。

＆＃34;！重要＆＃34;和＆＃34; .thisdiv .current {...}＆＃34;会这样做，但根据许多文章，他们并不那么受欢迎。是＆＃34; .thisdiv .current {...}＆＃34;在这种情况下是必须的吗？

Answer 1

选择器的特异性

在CSS选择器

中确定specificity values时，有一个重要的顺序

将标记和css中的.current更改为#current。 ID的排名高于班级 - jsFiddle Example

---

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

至少最伟大的

  

  
• 通用选择器
  
• 类型选择器
  
• 班级选择器
  
• 属性选择器
  
• 伪类
  
• ID选择器
  
• 内联样式
  

!important会覆盖上述