CSS中常用的选择器：（一）基本选择器（二）层次选择器（三）动态伪类选择器（四）目标伪类选择器（五）ui状态伪类选择器（六）结构伪类选择器（七）属性选择器（八）伪元素 (一)基本选择器1.标签选择器：通过标签名获取元素 权重：0001 （此种选择器影响范围大，建议尽量应用在层级选择器中。）2.class选择器：通过 . 类名获取元素权重：0010 （通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。）3.id选择器：通过 # id名获取元素 权重：0100 （通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。 ）4. * 通配符选择器：获取到页面的所有元素5.群组选择器：用逗号隔开基本选择器，表示这些选择器都获取到 (二)层次/关系选择器 （主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。）1.包含选择器：用空格隔开基本选择器，表示后一个选择器是前面的后代例：p a { color:red}2.子代选择器：用>隔开基本选择器，表示后一个选择器是前面的子代例：ul>li { line-style: none}3.相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的） 例： a+a { }4.兄弟选择器：E~F:表示获取到E后面所有的同级的F元素 例： li~li { }(三）动态伪类选择器1. a:link 锚链接被访问前添加样式2. a:visited 锚链接被访问后添加样式3. e:hover 鼠标悬停在元素上添加样式4. e:active 鼠标点击元素时添加样式5. :focus 表单元素被聚焦时，添加样式(四)目标伪类选择器语法： 目标:target {属性：属性值} 被选中的目标添加样式目标:target E子元素{属性：属性值} 被选中的目标里的E子元素添加样式 (五)ui状态伪类选择器1. :enabled 可用的表单元素添加样式2. :disabled 不可用的表单元素添加样式(disabled )3. :checked+E 被选中的表单元素添加样式(六)结构伪类选择器1. E:first-child 获取到E元素，且要满足为其父元素的第一个孩子。2. E:last-child 获取到E元素，且要满足为其父元素的最后一个孩子3. E:nth-child(n) 获取到E元素，且要满足为其父元素的第n个孩子n的用法：(1)6n倍数 (2)even偶数/2n odd奇数/2n-1（如可用来选中奇偶行来实现 “隔行换色”） (3) -n+5 选中1-5(4)p:nth-child(-n+3):nth-child(n+2) 2-3个4. E:nth-last-child(n) 获取到E元素，且要满足为其父元素的倒数第n个孩子5. E:first-of-type 获取到E元素，且要满足为其父元素的第一个该类型的孩子6. E:last-of-type 获取到E元素，且要满足为其父元素的最后一个该类型的孩子7. E:nth-of-type(n) 获取到E元素，且要满足为其父元素的第n个该类型的孩子8. E:nth-last-of-type(n)获取到E元素，且要满足为其父元素的倒数第n个该类型的孩子9. E:empty 获取到空的E元素（注：连空格都不能有）(七)属性选择器1. E[attr] 拥0有attr属性的E元素添加样式 如div[class] 2. E[attr="val"] 拥有attr属性值 为 val的E元素添加样式 如p[class="ab"]3. E[attr*="val"] attr属性值 包含 val的E元素添加样式 如ul[class="c"] 指class类名中包含有c字母的E元素4. E[attr^="val"] attr属性值以val 开头 的E元素添加样式5. E[attr$="val"] attr属性值以val 结尾 的E元素添加样式(八)伪元素1. E::before给E元素添加第一个子元素 （前面） 2. E::after 给E元素添加最后一个子元素（后面）3. E::first-letter给E元素第一个字添加样式4. E::first-line给E元素第一行添加样式 5. E::selection 元素内容被选中时添加样式(火狐需要加前缀-moz-)1.元素选择器：作用：通过元素选择器可以选择页面中的所有指定元素语法: 标签名{}2.id选择器：-通过元素的id属性值选择唯一元素-语法：#id属性值{} 3. 类选择器：- class属性和id属性类似，只不过class属性可以重复-拥有相同class属性值的元素，我们说他们是一组元素-一个元素可以有多个class属性值，多个值之间用空格隔开。 ！！！！！-通过元素的class属性值选中一组元素-语法：.class属性值{}4.选择器分组： -通过选择器分组可以同时选中多个选择器对应的元素。 -语法：选择器1，选择器2，选择器N{} -效果：同时选中了选择器1，2，N他们所指向的元素，实现了代码的复用。 5.通配选择器：-他可以用来选中页面中的所有元素。(模糊选择)-语法： *{}6.精准(复合)(交集)选择器： ！！！！！！-作用：- 可以选中同时满足多个选择器的元素 (精准选择)-语法：选择器1选择器2选择器N{} 指定同时选择器1，2，N的元素7.后代选择器：-作用：-可以选择某一元素的所有子孙元素。-语法：祖先元素 后代元素{}注：祖先元素与后代元素之间有一个空格。8.子元素选择器：-作用：-选中指定父元素的指定子元素。 注：明确子元素与子孙元素的区别-语法：父元素 >子元素 注：可在一个表达式中连续使用多个 >明确查找关系9.属性选择器：- 作用：可以根据元素中的属性或属性值来选取指定元素- 语法：[属性名] 选取含有指定属性的元素10.兄弟选择器：-选中某一个标签后的紧邻着的兄弟节点，若不紧邻则没用，选择不中。 -标签1 + 标签2{}-选中某一个标签的后面的所有兄弟节点-语法：前一个标签 ~ 后面的所有标签11.否定伪类：-作用：可以从已经选中的元素中剔除某些元素-语法：:not(选择器)-例如：p:not(.hello) 选中class属性不为hello的p标签
1、标签选择器
p{color:red}
什么是标签选择器？
根据指定标签名称，在当前界面中找到所有该名称的标签，并设置属性
注意点：
标签选择器选中的是当前界面所有同名标签，不能单独选中
只要是HTML中的标签都可以作为标签选择器
2、id选择器
#id{color:red}
什么是id选择器？
根据指定标签的id，在当前界面中找到该id的标签，并设置属性
注意点：
每个HTML标签都有id属性
同一个界面中id是唯一的，不能重复
编写id选择器必须要在id前面加上一个#号
id的名称有一定的规范，只能由字母数字和下划线组成
id的名称不能够以数字开头
id的名称不能与HTML标签同名
如果仅仅是为了设置样式，我们不会使用id，因为前段开发中id是留给js使用的
3、类选择器
.class{color:red}
什么是类选择器？
根据指定标签的类，在当前界面中找到该类的标签，并设置属性
注意点
每个HTML标签都有class属性
同一个界面中class属性是可以重复
编写class选择器必须要在class名称前面加上一个.号
class的名称有一定的规范，只能由字母数字和下划线组成
class的名称不能够以数字开头
class的名称不能与HTML标签同名
class就是专门给某一类标签设置样式的
一个标签可以同时绑定多个class属性
<p class="p1 p2 p3">Test paragraph</p>，这样就绑定了三个类属性
类选择器实践，通过对不同类的组合来实现不同的效果
