search

LLwanran / front_end_studying

前端知识要点
https://llwanran.github.io/front_end_studying/
2 stars 1 forks source link

以下输出结果是？（我乱编的^_^！） #8

Open LLwanran opened 5 years ago

LLwanran commented 5 years ago 
h3 { color: red }
div#test h3 { color: green }
div>h3 { color: blue }
.text{ color: yellow }
<div id="test">
  <h3 class="text">颜色是？</h3>
</div>
A.黄 B.蓝 C.绿 D.红

答案是C

这题主要考察CSS权重优先级，即在同一个元素使用不同的方式，声明了相同的一条或多条css规则，浏览器会通过权重来判断哪一种方式的声明，与这个元素最为相关，从而在该元素上应用这个声明方式声明的所有css规则

样式选择器权重优先级：

important > 内联样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 继承 > 通配符

举个栗子 ——
  • important：例如!important
  • 内联样式：例如style="font-weight:bold"
  • ID：例如#example
  • 类：例如.example
  • 标签：例如h1
  • 伪类：例如:hover
  • 属性选择：例如[type="radio"]
  • 伪元素：例如::before
  • 通配符：例如*