<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选择器的优先级别</title> <!-- CSS样式遵循的原则 1.相同类型的选择遵循就近原则,叠加原则 2.不同类型的选择器拥有优先级别: important > 内联 > id选择器 > 类 \标签选择器 |伪类 |属性选择 |伪元素 > 标签选择器 > 通配符 > 继承 --> <style> /*复合选择器*/ div.text1 { color: orange; } /*id选择器(权值100)*/ #main { color: rebeccapurple; } #second { color: darkslategrey; } /*类选择器(权值10)*/ .text1 { color: green;; } .text2 { color: yellow; } /*标签选择器(权值1)*/ /*important的权值是最高的*/ div { color: red !important; } /*通配符(权值0) 1.优先级别非常低 2.性能比较差 */ *{ font-size: 30px; } </style></head><body> <div id="main" class="text1 text2" style="color: yellow;">我是测试优先级别的</div></body></html>
时间： 2024-08-24 12:39:28