css选择器详解

1. 简单选择器（根据名称、id、类来选取元素）
2. 组合器选择器（根据它们之间的特定关系来选取元素）
3. 伪类选择器（根据特定状态选取元素）
4. 伪元素选择器（选取元素的一部分并设置其样式）
5. 属性选择器（根据属性或属性值来选取元素）

1、简单选择器

.class	.intro
#id	#firstname
#id	#firstname
element	p
element,element,…	div, p

2、组合选择器

• 后代选择器 (空格)
• 子选择器 (>)
• 相邻兄弟选择器 (+)
• 通用兄弟选择器 (~)

后代选择器（常用）

子选择器

相邻兄弟选择器：父级一样，选择div后面的p标签，只选择相邻的


通用兄弟选择器（少用）：
通用兄弟选择器匹配属于指定元素的同级元素的所有元素

3、伪类选择器

图片来源：w3school

4、伪元素选择器

图片来源：w3school

选择器执行顺序
！important
行内样式
选择器

id>class/伪类选择器/属性选择器 >
后代选择器/伪元素选择器 >
子选择器/相邻元素选择器 >
通配符

继承样式
浏览器默认样式

扩展：
1、浏览器默认样式
例如在Microsoft Edge浏览器中body默认样式

所以一般用*{margin：0；padding：0}来解决页面中文字不会直接顶到浏览器边框
2、可以继承的样式
（1）所有元素可继承
cursor鼠标样式和visibility是否可见
（2）内联元素可继承
letter-spacing或word-spacing（字符间距）、
white-space（规定段落中的文本换行）、
line-height（行高）、
文本属性（color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform）、direction
（3）块状元素可继承：text-indent和text-align

（4）列表元素可继承：list-style、list-style-type、list-style-position、list-style-image

（5）表格元素可继承：border-collapse