mj——css选择器总结及优先级问题

css选择器

选择器	举例
标签选择器	div，p，li等标签名的选择器
类选择器	给元素添加class类属性，利用属性名来选择，选择时为“.+属性名”
ID选择器	给元素添加ID属性，利用属性名来选择 ，选择时为“#+属性名”
全局选择器	匹配所有元素，*
后代选择器（继承选择器）	选择器之间用空格隔开，匹配前面父元素下的所有符合条件的后代
子代选择器 （包含选择器）	选择器之间用大于号隔开 ，匹配前面父元素下所有符合条件的第一级后代
群组选择器	选择器之间用逗号隔开，匹配多个符合不同条件的元素
伪类选择器	a标签的四种样式，代表四种状态，link，visited，hover，active，有顺序之分，顺序变化则不显示 ，使用方法为：“a:hover{样式}”
字符串匹配的属性选择器	^,$,*,分别对应开始，结尾，包含
兄弟选择器	相邻兄弟选择，p+div{样式}，只对p后面的div元素有效，这里要注意的是这两个元素不是包含关系，是并列关系

css选择器优先级

如果，css样式不冲突，则叠加显示，如果样式发生冲突，先按照优先级选取，如果优先级相同，则按照就近原则选取样式，即后写的样式覆盖先写的样式。
不同选择器优先级如下：
在属性后面使用！important>行内元素样式>id选择器>class选择器>标签选择器>通配符选择器>浏览器自定义或者继承的样式
如果涉及组合选择器，优先级计算方法如下：
内联选择器>ID选择器>类选择器>标签选择器优先级依次为A,B,C,D。
A，若存在内联选择器，则A=1，反之为0；
B，为id选择器的出现次数；
C，为类选择器，属性选择器，伪类选择器的出现次数；
D，为标签选择器和伪元素选择器出现的次数。
每个选择器之间数字不相加。
例如：
例子来自 https://www.cnblogs.com/yugege/p/9918232.html

li                                  /* (0, 0, 0, 1) */
ul li                               /* (0, 0, 0, 2) */
ul ol+li                            /* (0, 0, 0, 3) */
ul ol+li                            /* (0, 0, 0, 3) */
h1 + *[REL=up]                      /* (0, 0, 1, 1) */
ul ol li.red                        /* (0, 0, 1, 3) */
li.red.level                        /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11  /* (0, 0, 11,0) */
#x34y                               /* (0, 1, 0, 0) */
li:first-child h2 .title            /* (0, 0, 2, 2) */
#nav .selected > a:hover            /* (0, 1, 2, 1) */
html body #nav .selected > a:hover  /* (0, 1, 2, 3) */

比较的时候从左往右比较，相等则右移，若四位相等，遵循就近原则。

特殊情况

由上可知，内联样式优先级最高，但是要是想要覆盖内联样式，则可用！important，但是尽量不要使用，因为当给内联样式使用了它之后，无论外部怎么写都不能覆盖它，所以不能再内联样式中使用它。
这里有个点：若是怎么设置容器的宽度都不生效，那么需要检查是不是写了max-width，因为它可以超越width！important。