CSS选择器详解
CSS 选择器
CSS 选择器用于"查找"（或选取）要设置样式的 HTML 元素。
我们可以将 CSS 选择器分为五类：
- 基本选择器（根据名称、id、类来选取元素）
- 组合器选择器（根据它们之间的特定关系来选取元素）
- 伪类选择器（根据特定状态选取元素）
- 伪元素选择器（选取元素的一部分并设置其样式）
- 属性选择器（根据属性或属性值来选取元素）
基本选择器
1、通配符选择器
* { }
* 代表页面中所有的元素
2、元素选择器
元素名称 { }
想改变某个元素的默认样式时或者统一文档某个元素的显示效果时
3、id 选择器
# id { }
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
id 是独一无二的
4、class 类选择器
.class { }
class 选择器用于描述一组元素的样式，
class 选择器有别于id选择器，class可以在多个元素中使用
一个元素可以设置多个类名
5、群组选择器
使用逗号（,）表示
h1, h2, p { text-align: center; color: red; }
把多个选择器写在一起，方便样式的组织管理，组内的选择器是任意类型的。
组合器选择器
1、后代选择器
使用空格（ ）表示
div span{ color: red; }
表示div下存在的所有span
2、子代选择器
使用尖角号（>）表示，CSS3（新增）
div >span{ color: red; }
表示div下第一层的span，准确定义HTML文档某个或一组子元素的样式
3、相邻兄弟选择器
使用加号（+）表示，CSS3（新增）
指定与一个元素相邻的下一个元素的样式，匹配一个
4、兄弟选择器
使用（~）表示
选择紧跟着当前符合条件元素后面的同级元素，可以匹配多个
伪类选择器
1、目标伪类选择器
:target
针对a标签的目标元素，锚点链接，跳转过去实现新的css样式
2、结构伪类选择器
- (el):first-child 选择子元素中的第一个元素
- (el):last-child 选择所有 el 元素的最后一个子元素
- (el):nth-child(n) 选择所有 el 元素的父元素的第 n 个子元素
- (el):nth-last-child(n) 选择所有 el 元素倒数的第 n 个子元素
- (el):only-child 选择所有仅有一个子元素，并且子元素是 el 元素
- (el):first-of-type 选择父元素中的第一个 el 元素
- (el):last-of-type 选择父元素中最后一个 el 元素
- (el):nth-of-type(n) 选择所有p元素第 n 个为 el 的子元素
- (el):nth-last-of-type(n) 选择所有p元素倒数的第 n 个为 el 的子元素
- (el):only-of-type 选择所有仅有一个子元素中为 el 的元素
奇数：odd；偶数：even；number*n：可用于隔行变色，或特定位置的多个元素样式的设置
- (el):empty 匹配没有子元素（包括文本节点）的 el 元素
3、否定伪类选择器
- :not(el) 选择所有 el 以外的元素
针对特殊元素不想设置css属性
4、状态（表单元素）伪类选择器
- :focus 选择元素输入后具有焦点
- :enabled 匹配每个已启用的元素
- :disabled 匹配每个被禁用的元素
- :checked 匹配每个已被选中的 元素
- :required 选择有"required"属性指定的元素属性
- :optional 选择没有"required"的元素属性
- :read-only 选择只读属性的元素属性
- :read-write 选择没有只读属性的元素属性
- :valid 选择所有有效值的属性
- :invalid 在表单元素中的值是非法时设置指定样式
- :in-range 用于标签的值在指定区间值时显示的样式
- :out-of-range 选择指定范围以外的值的元素属性
伪元素选择器
伪元素，是html中不存在的元素，仅在css中用来渲染的，伪元素创建了一个虚拟容器，
这个容器不包含任何DOM元素，但是可以包含内容
- ::after 在内容后增加内容
- ::before 在内容前增加内容
- ::first-letter 选择器的首字母
- ::first-line 选择器的首行
- ::selection 被用户选取的部分
属性选择器
- E[attr]：只使用属性名，但没有确定任何属性值
- E[attr="value"]：指定属性名和属性值(值完整)
- E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词
- E[attr^="value"]：属性值是以value开头的(一部分也可以)
- E[attr$="value"]：属性值是以value结束的(一部分也可以)
- E[attr*="value"]：属性值中包含了value(一部分也可以)
- E[attr|="value"]：属性值是value或者以“value-”开头的值
