一个css样式优先级问题引起的思考......

一、遇到的问题

首先问题是这样的，问背景色是什么？

.box {
    background: red;
}

.box: first-child {
    background: yellow;
}

我的第一直觉认为，应该是yellow，因为red是类选择器和yellow是伪类选择器优先级一样，那么后边写的就会覆盖前边写的吧

实际结果也是yellow优先级高，但是：

当我把他们交换顺序，改成下面这种时：

.box: first-child {
    background: yellow;
}

.box {
    background: red;
}

依旧是yellow优先级高，这个不就与刚说的顺序覆盖问题相矛盾了吗？？？大写的疑问，所以带着这个问题，再重新学习css样式优先级。

二、寻找答案

MDN上是这样说的：

但是看完，还是不清楚属性选择器、伪类、伪元素的优先级应该是什么样的，所以看了看Selectors Level 4标准，类似是这样的：

有A，B，C分别依次对应计算，上边3，2，1三类选择器，比如:

li              /* a=0 b=0 c=1 */
ul li           /* a=0 b=0 c=2 */
h1 + *[ref=up]  /* a=0 b=1 c=1 */
#x34y           /* a=1 b=0 c=0 */

然后以a->b->c的顺序，依次比较大小，若都相等，则后边的会覆盖前边的样式。

但是看完我发现，原来我的误区不在优先级的判断，而在于伪元素、伪类、属性选择器的判断，即：

这是重点：

这是一个类选择器和伪类选择器，不是只有伪类选择器

.box: first-child {
}

 这是一个标签选择器和属性选择器，不是只有属性选择器

p[class="box"] {
}

总结：

通过这个问题，终于把css样式的优先级彻底弄明白了，之前只是背下来了优先级顺序，并没有真正的去试试，所以有些时候，还得实践呀！！