css选择器权重、大小写、区别

1.  

选择器类型

通配选择器，元素选择器，类选择器，ID 选择器，属性选择器，并集选择器， 后代选择器，子选择器，一般兄弟选择器，紧邻兄弟选择器，伪选择器。

1.  

权重计算：

1. 第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。
   2、第一等：内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用）
   3、第二等：ID选择器，如：#header，权值为0100.
   4、第三等：类、伪类、属性选择器如：.bar， 权值为0010.
   5、第四等：标签、伪元素选择器，如：div ::first-line 权值为0001.
   6、通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.
   7、继承的样式没有权值。

比较规则：

1. 1000>09999：从左往右逐个等级比较，前一等级相等才能往后比较（1000与09999对比的时候需要补位，即10000>09999）。

1.  无论是行内，内部，外部样式，都是按照以上的权重方式进行比较。而不是直观的行间>内部>外部样式；之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般写在了外部，样式引用了之后，所以覆盖掉了之前的。当内部样式与外部相等时，外部会覆盖掉内部，所以此时有外部>内部。
2.  权重相同的情况先，后写的颜色会覆盖前写的样式。
3.  通配符，子选择器，相邻选择器，虽然权重为0000，但是比继承的样式优先
   C.

Css选择器：

ID和类选择器区分大小写

标签选择器属性选择器不区分大小写

 .class1{

                background-color: red;

            }

class=class1   class=claAss1

Div{

      background-color: green;   

            }

<div  style="height: 100px;width: 100px;"></div>

Css属性：不区分

.class1{

            bAckground-color: red;

        }

<div class="class1" style="height: 100px;width: 100px;"></div>

Css属性值：不区分

.class1{

        background-color: Red;

 }

<div class="class1" style="height: 100px;width: 100px;"></div>

 

1. Class选择器和ID选择器的区别

ID选择器只能用一次，class选择器可以用多次。