爱站程序员基地CSS选择器
css选择器有，元素选择器、id选择器、类选择器、后代选择器、子元素选择器、相邻兄弟选择器、通用选择器(不相邻兄弟)、并集选择器(群组选择器)、通配符选择器还有伪类选择器等在这里我i就介绍以下几种，伪类选择器在我的其它文章有介绍可自行查看。
1、元素选择器就是选中相同元素定义一个CSS样式。
2、id选择器具有唯一性，一个页面中相同的id只能出现一次。
3、类选择器可以对相同元素和不同元素定义相同的class属性，然后对拥有同一个class的元素进行css操作，class名前面必须加上前缀.(英文符号)，否则选择器无法生效。
4、后代选中器，就是1选中元素内部中所有的某一种元素，包括子元素和其他后代元素(如孙子元素)。
5、子元素选择器是指父元素直接包含子元素。
6、相邻兄弟选择器，用法AB元素之间没有其他任何标签兄弟元素A+兄弟元素B。
7、通用选择器(不相邻兄弟)，后者都选中兄弟A“~”B兄弟元素，选中A后面所有兄弟元素B。
8、并集选择器，两个选择器之间必须用英文逗号隔开(,)。
9、通配符选择器，选中页面所有,*(一般用于清楚内外边距)。
下面通过举个栗子，这样大家更好理解。
<p id=\"content\">Lorem, ipsum dolor.</p><p class=\"content\">Temporibus, sed earum.</p><p >Tempore, minima facilis?</p>
CSS样式 1、2、3
/* 元素选择器 */p{color:yellow;}/* id选择器 */#content{color: red;}/* 类选择器 */.content{color:orange;}
HTML元素4 5：
<!-- 子元素选择器 --><div><p>学习</p></div><!-- 后代选择器 --><div><p><span>加油</span></p></div>
CSS样式：
div>p{color:red;}div span{color:yellow;}
并集选择器 ，举个栗子：
<p>1234</p><div>4567</div><span>891011</span>
都给他们CSS样式设置相同：
p,div,span{color:red;}
不相邻兄弟选择器和相邻兄弟选择器：
<p>1234</p><p>0</p><div>4567</div><span>891011</span><p>789</p>
不相邻：
p~p{color:red;}
相邻：
/* 相邻兄弟 */p+p{color:yellow;}
声明冲突
声明冲突：是指多个选择器选中同一个标签，如果属性名相同属性不同则会产生冲突，如果发生冲突浏览器会触发自己的层叠机制。
层叠过程分成3个过程:依次从比较优先级、比较特殊性、比较原次序来触发层叠机制。
1、比较优先级：从来源和重要性比较。
| 来源 | 高低 |
|---|---|
| 浏览器 | 低 |
| 作者 | 中 |
| 用户 | 高 |
重要性(!important)：作者低 用户最高。
2、比较特殊性：从高到低 行内样式(1000)、id(0100)、类/伪类(0010)、元素/伪元素(0001)。
3、比较次序(就近原则)：如果前2个比较完后还不能分出胜负、就比较次序、浏览器是从上往下分析代码，后来的获胜。
