CSS常用选择器归纳大全

html零基础必看——html入门，编程就是如此简单

1. 初级选择器

1. 以标签名 标签名选择器 如 p{ }
2. 以# id选择器 如 #one{ ]
3. 以 . 类名选择器 如 . box
4. 以 通配符选择器 如 { } 可用于清除默认样式
5. 以 空格 后代选择器（父 子 孙 …）如 div box p{ }
6. 以 ， 并列选择器（多个选择器使用同一个样式） 如 p ,span,li{ }
7. 以 > 子代选择器 常用（精确范围小写=些，更精准） 如 div>ul>.li1 { }
8. 以 ~ 关联选择器（兄 ~ 弟 后续所有的弟弟）
9. 以 + 相邻兄弟选择器（兄 + 弟 紧挨着的一个弟弟）

2. 属性选择器

• 通过属性来选择

如：a[target]{color: red; }
选择a标签里面 拥有target属性的标签 然后加个红色的字体样式

• 通过属性来选择，然后再通过属性值缩小选择

如：a[target$="k"]{ color: green; }
找到a标签 拥有target属性的标签，并且是以k结尾的属性值

如：a[href^="h"]{color: pink; }
找到a标签 拥有href属性的标签 并且是以h为开头的属性值

如：a[target*="se"]{ color: skyblue; }
找到a标签 拥有target属性的标签 并且包含了se这两个字符的属性值

3. 伪类选择器

3.1 状态类

元素在特定状态下发生样式的改变

鼠标状态：

1. :hover 鼠标悬停状态 常用
2. :active 鼠标点击状态

仅限a标签使用的：

3. link 未被访问的链接（仅限a标签使用）
4. :visited 已被访问过的的链接（仅限a标签使用）

仅限input表单控件状态下：
5. :focus 表单输入框获得焦点状态下（先要清除默认样式）
6. :checked 表单被勾选（单选/多选）的状态下

3.2 结构类

结构 :子元素选择器 :nth-child(n)

1. 父级选择下面的某一个儿子：nth-child(n）
   如：ul>li:nth-child(3)
2. 选择父元素的第一个子元素 first-child
   如：ul>li:first-child
3. 选择父元素的最后一个子元素 last-child
   如：ul>li:last-child
4. 选择父元素的所有奇数个元素 odd / 2n-1
   如：ul>li:nth-child(2n-1)或 ul>li:nth-child(odd)
5. 选择父元素的所有偶数个元素 even / 2n
   如：ul>li:nth-child(2n)或 ul>li:nth-child(even )
6. 同时选择指定的多个元素，中间用并列选择器(,)
   如：li:nth-child(1),li:nth-child(4)
7. 表示从第m个 一直选择到最后一个
   如:ul>li:nth-child(n+3)

4.伪元素选择器

4.1 伪元素选择器的写法

• E::before 相当于在E元素的最前面添加一个额外的子元素
  如：p::before{content:"Hello World!"}
• E::after 相当于在E元素的最后面添加一个额外的子元素
  如：p::after {content:"Hello World!"}
::afte常用来清除浮动，前面第十章中浮动中的高度塌陷问题有讲到

4.2 注意

• 必须拥有 content 样式，上述两个伪元素才会生效。
• 创建添加的子元素必须是一个行内元素。
• content 除了写文字之外，还可以用url指定一张图片等其他写法。

4.3 伪类选择器和伪元素选择器的区别

• 伪类选择器相当于在某种情况下添加一个虚拟类名，而伪元素选择器则是相当于创建了一个虚拟元素。
• 伪类： 只会修改元素状态样式。（用一个：）
• 伪元素类：会创建一个新的虚拟元素。（用两个：：）

5.样式的优先级比较

!important > 行内样式 > id > 子代 > class | 属性 | 伪类 |
伪元素 > 标签 | +（相邻） | ~ （关联）| > * 通配符

总结

上述是小编为大家整理的CSS一些比较重要的选择器，进行分类归纳。参考多方资料加上自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。