css选择器优先级排序

CSS选择器的优先级是由选择器本身的特殊性决定的，特殊性值的高低依次是：

1. 内联样式（使用HTML的style属性）
2. ID选择器
3. 类选择器、属性选择器、伪类
4. 元素选择器和伪元素
5. 通配选择器（*）

特殊性值计算时，会将ID选择器的值计算在内，并且通过相应的乘法积增加。例如，一个类选择器与一个元素选择器组合的特殊性值将会比仅有一个元素选择器的低，因为类选择器的特殊性值为10。

如果两个选择器特殊性值相同，那么后定义的选择器会被应用。

以下是一个简单的例子，演示了如何根据这些规则来判断优先级：

#myId { /* 特殊性值100 */
  color: red;
}
 
div #myId { /* 特殊性值100 + 1 = 101 */
  color: blue;
}
 
.myClass { /* 特殊性值10 */
  color: green;
}
 
div .myClass { /* 特殊性值10 */
  color: purple;
}
 
div { /* 特殊性值1 */
  color: yellow;
}

如果我们应用这些规则到具体的元素上，例如：

<div id="myId" class="myClass">这是一个文本。</div>

根据特殊性值的比较，div #myId 的选择器优先级更高，因此文本颜色应该是蓝色。div .myClass 的选择器优先级和#myId相同，但它在#myId之后被定义，所以它的规则将不会被应用。

在实际开发中，我们通常会使用更复杂的选择器结构，并且利用层叠（cascade）和继承来构建样式，而不是仅仅依赖特殊性值来决定每一个属性。