css选择器分类及优先级判断

在CSS中，选择器按其功能和特性可以分为不同的类别，包括基础选择器、属性选择器、伪类和伪元素等。

CSS选择器的优先级是根据选择器的特异性来决定的，特异性由四个级别组成：标签、类、ID 和通配符，数量级越高，特异性越高。

解决方案：

1. 定义一个HTML结构，包含不同类型的选择器：

<div id="myDiv" class="myClass">我是一个DIV</div>

2. 定义CSS规则，包括不同类型的选择器：

/* 标签选择器 */
div { color: red; }
 
/* 类选择器 */
.myClass { color: blue; }
 
/* ID选择器 */
#myDiv { color: green; }
 
/* 行内样式 */
<div style="color: purple;">我是一个DIV</div>
 
/* 伪类选择器 */
div:hover { color: orange; }
 
/* 通配符选择器 */
* { color: yellow; }

3. 使用JavaScript检查元素的样式优先级：

function getComputedStyle(element) {
    return window.getComputedStyle(element, null).getPropertyValue('color');
}
 
var element = document.getElementById('myDiv');
console.log(getComputedStyle(element)); // 输出计算后的样式

在上述例子中，元素myDiv的最终颜色将取决于其与选择器匹配的优先级，即特异性。如果myDiv具有内联样式，则其优先级最高；接下来是ID选择器，然后是类选择器，最后是标签选择器。通配符选择器具有最低的优先级，只有当其他所有选择器都未应用样式时，它才会被应用。