什么是选择器
选择器用来指定网页上我们想要样式化的html元素。是css规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个html元素应当是被选为应用规则中的css属性值的方式。选择器选择的元素，叫做‘选择器的对象’
选择器列表
如果你有多个使用相同样式的CSS选择器，那么这些单独的选择器可以被混编为一个选择器列表，这样，规则就可以应用到所有的单个选择器上了。 将多个选择器组合起来，在它们之间加上一个逗号，变为选择器列表。空格可以在逗号前或后，你可能还会发现如果每个选择器都另起一行，会更好读些。
选择器的种类
选择器可以分为两类：基础选择器和复合选择器
基础选择器
标签选择器
- 作用：可以选出所有相同的标签，如p,使用较多
- 缺点：不能差异化
- 用法：p {color: red}
类选择器
- 作用：可以选出一个或多个标签，使用非常多
- 缺点：在获取DOM对象时，如果想要获取某个元素会很麻烦，不建议使用类选择器获取DOM元素。可以根据需求选择
- 用法：.nav {color: red}
id选择器
- 作用：一次只能选择一个标签，不推荐使用。
- 缺点：只能使用一次
- 用法：#eg {color: red}
通配符选择器
- 作用：选择所有的标签，不推荐使用
- 缺点：选择的太多，有部分不需要
- 用法：* {color: red}
复合选择器
- 目的是为了选择更准确更精细的目标元素标签
- 复合选择器就是由两个或多个基础选择器，通过不同方式组合而成的。
后代选择器
- 作用：用于选择元素后代，使用较多
- 特征：选择所有的子孙后代
- 用法：符号是空格 .nav p{color: #000;}
子代选择器
- 作用：选择最近一级元素，使用较少
- 特征：只选择亲儿子
- 用法：符号是> .nav>p{color: #000;}
交集选择器
- 作用：选择两个标签交集的部分，使用较少
- 特征：既是...又是
- 用法：没有符号 p.nav{color: #000;}
并集选择器（多元素选择器）
- 作用：选择某些相同样式使用较多
- 特征：可以用于集体的声明
- 用法：符号是逗号 p,.nav{color:#000;}
毗邻元素选择器
- 作用：匹配所有紧随当前元素之后的同级元素
- 特征：筛选同级元素
- 用法：符号是+ p+.nav{color:#000;}
同级元素通用选择器（CSS3新增）
- 作用：匹配任何在当前元素之后的同级元素
- 特征：筛选之后的同级元素
- 用法：符号是~ p~.nav{color:#000;}
属性选择器
- 作用：匹配所有属性满足的当前元素
- 特征：筛选属性相同的元素
- 用法：符号是[] p[attr]
属性选择器具体划分有以下几种：
| 选择器 | 含义 |
|---|---|
| p[att] | 匹配所有具有att属性的p元素，不考虑它的属性值 |
| p[att=val] | 匹配所有att属性等于'val'的p元素 |
| p[att~=val] | 匹配所有att属性具有多个空格分隔的值、其中一个值等于'val'的p元素 |
| p[att|=val] | 匹配所有att属性具有多个连字符分隔的值，其中一个值以'val'开头的p元素 |
以下几个是css3新增的
| 选择器 | 含义 |
|---|---|
| p[att^='val'] | 匹配所有att属性以'val'开头的p元素 |
| p[att$=val] | 匹配所有att属性以'val'结尾的p元素 |
| p[att*=val] | 匹配所有att属性包含'val'的p元素 |
链接伪类选择器
- 作用：给链接更改状态，使用较多
- 用法：重点记住a{}和a:hover{}等
以下是css2.1中的伪类选择器
| 选择器 | 含义 |
|---|---|
| p:first-child | 匹配p元素的第一个子元素 |
| p:link | 匹配所有未被点击的链接，主要用于a元素 |
| p:visited | 匹配所有已经被点击的链接，主要用于a元素 |
| p:active | 匹配所有鼠标已经按下但还没有释放的p素 |
| p:hover | 匹配所有鼠标停在上面的p元素 |
| p:focus | 匹配所有鼠标光标焦点在上面的p元素 |
| p:lang(c) | 匹配所有lang属性c的p元素 |
以下是css2.1中的伪元素
| 选择器 | 含义 |
|---|---|
| p:first-line | 匹配p元素的第一行 |
| p:first-letter | 匹配p元素的第一个字母 |
| p:before | 在p元素之前插入生成的内容 |
| p:after | 在p元素之后插入生成的内容 |
以下是css3中与用户界面有关的伪类
| 选择器 | 含义 |
|---|---|
| p:enabled | 匹配表单中被激活的元素 |
| p:disabled | 匹配表单中禁用的元素 |
| p:checked | 匹配表单中被选中的元素，一般是radio或checkbox元素 |
| p::selection | 匹配用户当前选中的元素 |
以下是CSS3中的结构性伪类
| 选择器 | 含义 |
|---|---|
| p:root | 匹配文档的根元素，在html中，就是html元素 |
| p:nth-child(n) | 匹配其父元素的第n个子元素，第一个子编号为1 |
| p:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，第一个子编号为1 |
| p:nth-of-type(n) | 和p:nth-child(n)类似，只是匹配的是相同标签的元素 |
| p:nth-last-type(n) | 和nth-last-child(n)类似，只是匹配的是相同标签的元素 |
| p:last-child | 匹配其父元素的最后一个子元素，等同于p:nth-last-child(1) |
| p:first-of-type | 匹配其父元素下使用同一种标签的第一个元素，等同于p:nth-of-type(1) |
| p:last-of-type | 匹配其父元素下使用同一种标签的最后一个元素，等同于p:nth-last-type(1) |
| p:only-child | 匹配其父元素下仅有的一个元素 |
| p:only-of-type | 匹配其父元素下使用同一种标签的唯一的一个元素 |
| p:empty | 匹配一个不包含子元素的元素，需要特别注意的是文本元素也是一个元素 |
以下是css3中的反选伪类
| 选择器 | 含义 |
|---|---|
| p:not(s) | 匹配不符合当前选择器的任何元素 |
以下是css3中的target伪类
| 选择器 | 含义 |
|---|---|
| p:target | 匹配文档中特定'id'点击后的效果 |
选择器的特性
css选择器具有三大特性
- 层叠性
- 继承性
- 优先级 下面我们具体介绍一下这三种特性。
层叠性
层叠性的意思就是可以一层层往相同元素相同属性上添加不同样式。主要有以下几种表现
- 相同选择器相同属性设置相同样式，一个样式会覆盖另一个样式，具体是怎样覆盖的，得结合就近原则和优先级优先级来看
- 样式冲突遵循的是就近原则
- 样式不冲突则不会重叠
继承性
继承性很好理解，就是子元素可以继承父元素的样式，一般关于文本的样式都可以继承。如：text-, font-, line-这些开头的属性和color属性。
优先级
优先级顾名思义，相同元素相同属性，选择器优先级越高，当前样式就会生效，其他优先级低的样式就会被覆盖掉。主要有以下几个方面
- 当一个元素指定多个选择器时，则有优先级的产生
- 当选择器相同则执行层叠性
- 当选择器不同，则根据选择器权重执行
- 具体选择器权重如下：
- 继承或者*（通配符选择器）： 0
- 元素选择器： 1
- 类选择器，伪类选择器：10
- id选择器： 100
- 行内样式style="": 1000
- !import： 无穷大
- 权重由四组数字组成，但是不会进位
- 值从左到右，左边最大，一级大于一级，级别之间不可超越
- 复合选择器的权重会叠加但不会进位
