很多人都觉得CSS特别简单，但其实真正写好CSS并不容易，CSS的每一点其实内容都很多，就拿选择器来说，CSS选择器大概可以分为五类：
元素选择器
关系选择器
属性选择器
伪类选择器
伪对象选择器
| 选择器 | 名称 | 描述 |
|---|---|---|
* |
通配选择器 | 选择所有的元素 |
E |
元素选择器 | 选择指定的元素 |
#idName |
id选择器 | 选择id属性等于idName的元素 |
.className |
class选择器 | 选择class属性包含className的元素 |
元素选择器只要是写CSS都会经常用，这一块的内容非常简单，没什么特别要说的。
| 选择器 | 名称 | 描述 |
|---|---|---|
E F |
包含选择器 | 选择所有包含在E元素里面的F元素 |
E>F |
子选择器 | 选择所有作为E元素的子元素F |
E+F |
相邻选择器 | 选择紧贴在E元素之后的F元素 |
E~F |
兄弟选择器 | 选择E元素所有兄弟元素F |
这里要注意几点：
子选择器只能选中字元素，而不能选中孙辈；而包含选择符将会选中所有符合条件的后代，包括儿子，孙子，孙子的孙子...
相邻选择符只会选中符合条件的相邻的兄弟元素；而兄弟选择符会选中所有符合条件的兄弟元素，不强制是紧邻的元素。
在Android Browser4.2.*及以下，伪类选择器:checked与兄弟选择符一起使用会有一个bug，查看详情。
| 选择器 | 描述 |
|---|---|
E[att] |
选择具有att属性的E元素 |
E[att="val"] |
选择具有att属性且属性值等于val的E元素 |
E[att~="val"] |
选择具有att属性且属性值其中一个等于val的E元素（包含只有一个值且该值等于val的情况） |
E[att|="val"] |
选择具有att属性且属性值为以val开头并用连接符-分隔的字符串的E元素，如果属性值仅为val，也将被选择 |
E[att^="val"] |
选择具有att属性且属性值为以val开头的字符串的E元素 |
E[att$="val"] |
选择具有att属性且属性值为以val结尾的字符串的E元素 |
E[att*="val"] |
选择具有att属性且属性值为包含val的字符串的E元素 |
| 选择器 | 描述 |
|---|---|
E:link |
设置超链接a在未被访问前的样式 |
E:visited |
设置超链接a在其链接地址已被访问过时的样式 |
E:hover |
设置元素鼠标在其悬停时的样式 |
E:active |
设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式 |
E:focus |
设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。(一般应用于表单元素) |
E:checked |
匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) |
E:enabled |
匹配用户界面上处于可用状态的元素E。(一般应用于表单元素) |
E:disabled |
匹配用户界面上处于禁用状态的元素E。(一般应用于表单元素) |
E:empty |
匹配没有任何子元素（包括text节点）的元素E |
E:root |
匹配E元素在文档的根元素。在HTML中，根元素永远是HTML |
E:not(s) |
匹配不含有s选择符的元素E |
E:first-child |
匹配父元素的第一个子元素E |
E:last-child |
匹配父元素的最后一个子元素E |
E:only-child |
匹配父元素仅有的一个子元素E |
E:nth-child(n) |
匹配父元素的第n个子元素E |
E:nth-last-child(n) |
匹配父元素的倒数第n个子元素E |
E:first-of-type |
匹配同类型中的第一个同级兄弟元素E |
E:last-of-type |
匹配同类型中的最后一个同级兄弟元素E |
E:only-of-type |
匹配同类型中的唯一的一个同级兄弟元素E |
E:nth-of-type(n) |
匹配同类型中的第n个同级兄弟元素E |
E:nth-last-of-type(n) |
匹配同类型中的倒数第n个同级兄弟元素E |
注意事项：
超链接的4种状态(访问前，鼠标悬停，当前被点击，已访问)，需要有特定的书写顺序才能生效；a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后。
E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。
:not()的用法假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线。
li:not(:last-child) {
border-bottom: 1px solid #ddd;
}上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线。是不是很方便。
:nth-child()的用法要使E:nth-child(n)生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。:first-child、:last-child、:only-child、:nth-last-child(n)也是一样。nth-child(n)括号里的n可以是一个数字，一个关键字，或者一个公式。
:nth-child(length) /*参数是具体数字 length为整数*/ :nth-child(n) /*参数是n,n从0开始计算*/ :nth-child(n*length) /*n的倍数选择，n从0开始算*/ :nth-child(n+length) /*选择大于等于length后面的元素*/ :nth-child(-n+length) /*选择小于等于length前面的元素*/ :nth-child(n*length+1) /*表示隔几选一*/ :nth-child(2n) / :nth-child(even) /*表示偶数*/ :nth-child(2n+1) / :nth-child(odd) /*表示奇数*/
:...-child和:...-of-type的差异这两个系列的属性确实很相似，对于不熟悉的人可能很难区分。
E:first-of-type 总是能命中父元素的第1个为E的子元素，不论父元素第1个子元素是否为E；而E:first-child里的E元素必须是它的兄弟元素中的第一个元素，否则匹配失效。E:last-of-type 与E:last-child也是同理。E:nth-of-type(n)总是能命中父元素的第n个为E的子元素，不论父元素第n个子元素是否为E；而E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。
关于:nth-child()与:nth-of-type()的区别可以看这篇文章
:empty区分空元素选择不包含子元素的p元素：
p:empty
选择包含子元素的p元素：
p:not(:empty)
| 选择器 | 描述 |
|---|---|
E:before/E::before
|
在目标元素E的前面插入的内容。用来和content属性一起使用 |
E:after/E::after
|
在目标元素E的后面插入的内容。用来和content属性一起使用 |
E:first-letter/E::first-letter
|
设置元素内的第一个字符的样式 |
E:first-line/E::first-line
|
设置元素内的第一行的样式 |
E::placeholder |
设置元素文字占位符的样式。(一般用于input输入框) |
E::selection |
设置元素被选择时的字体颜色和背景颜色 |
注意事项：
::placeholder在使用时需要加上各个浏览器的前缀；除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder。
选择器用得好其实可以让我们少些很多代码。其实还有一些东西没有展开来讲，比如:before和:after，后面专门写一篇文章来说。
很多人都觉得CSS特别简单，但其实真正写好CSS并不容易，CSS的每一点其实内容都很多，就拿选择器来说，CSS选择器大概可以分为五类：
元素选择器
关系选择器
属性选择器
伪类选择器
伪对象选择器
| 选择器 | 名称 | 描述 |
|---|---|---|
* |
通配选择器 | 选择所有的元素 |
E |
元素选择器 | 选择指定的元素 |
#idName |
id选择器 | 选择id属性等于idName的元素 |
.className |
class选择器 | 选择class属性包含className的元素 |
元素选择器只要是写CSS都会经常用，这一块的内容非常简单，没什么特别要说的。
| 选择器 | 名称 | 描述 |
|---|---|---|
E F |
包含选择器 | 选择所有包含在E元素里面的F元素 |
E>F |
子选择器 | 选择所有作为E元素的子元素F |
E+F |
相邻选择器 | 选择紧贴在E元素之后的F元素 |
E~F |
兄弟选择器 | 选择E元素所有兄弟元素F |
这里要注意几点：
子选择器只能选中字元素，而不能选中孙辈；而包含选择符将会选中所有符合条件的后代，包括儿子，孙子，孙子的孙子...
相邻选择符只会选中符合条件的相邻的兄弟元素；而兄弟选择符会选中所有符合条件的兄弟元素，不强制是紧邻的元素。
在Android Browser4.2.*及以下，伪类选择器:checked与兄弟选择符一起使用会有一个bug，查看详情。
| 选择器 | 描述 |
|---|---|
E[att] |
选择具有att属性的E元素 |
E[att="val"] |
选择具有att属性且属性值等于val的E元素 |
E[att~="val"] |
选择具有att属性且属性值其中一个等于val的E元素（包含只有一个值且该值等于val的情况） |
E[att|="val"] |
选择具有att属性且属性值为以val开头并用连接符-分隔的字符串的E元素，如果属性值仅为val，也将被选择 |
E[att^="val"] |
选择具有att属性且属性值为以val开头的字符串的E元素 |
E[att$="val"] |
选择具有att属性且属性值为以val结尾的字符串的E元素 |
E[att*="val"] |
选择具有att属性且属性值为包含val的字符串的E元素 |
| 选择器 | 描述 |
|---|---|
E:link |
设置超链接a在未被访问前的样式 |
E:visited |
设置超链接a在其链接地址已被访问过时的样式 |
E:hover |
设置元素鼠标在其悬停时的样式 |
E:active |
设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式 |
E:focus |
设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。(一般应用于表单元素) |
E:checked |
匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) |
E:enabled |
匹配用户界面上处于可用状态的元素E。(一般应用于表单元素) |
E:disabled |
匹配用户界面上处于禁用状态的元素E。(一般应用于表单元素) |
E:empty |
匹配没有任何子元素（包括text节点）的元素E |
E:root |
匹配E元素在文档的根元素。在HTML中，根元素永远是HTML |
E:not(s) |
匹配不含有s选择符的元素E |
E:first-child |
匹配父元素的第一个子元素E |
E:last-child |
匹配父元素的最后一个子元素E |
E:only-child |
匹配父元素仅有的一个子元素E |
E:nth-child(n) |
匹配父元素的第n个子元素E |
E:nth-last-child(n) |
匹配父元素的倒数第n个子元素E |
E:first-of-type |
匹配同类型中的第一个同级兄弟元素E |
E:last-of-type |
匹配同类型中的最后一个同级兄弟元素E |
E:only-of-type |
匹配同类型中的唯一的一个同级兄弟元素E |
E:nth-of-type(n) |
匹配同类型中的第n个同级兄弟元素E |
E:nth-last-of-type(n) |
匹配同类型中的倒数第n个同级兄弟元素E |
注意事项：
超链接的4种状态(访问前，鼠标悬停，当前被点击，已访问)，需要有特定的书写顺序才能生效；a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后。
E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。
:not()的用法假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线。
li:not(:last-child) {
border-bottom: 1px solid #ddd;
}上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线。是不是很方便。
:nth-child()的用法要使E:nth-child(n)生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。:first-child、:last-child、:only-child、:nth-last-child(n)也是一样。nth-child(n)括号里的n可以是一个数字，一个关键字，或者一个公式。
:nth-child(length) /*参数是具体数字 length为整数*/ :nth-child(n) /*参数是n,n从0开始计算*/ :nth-child(n*length) /*n的倍数选择，n从0开始算*/ :nth-child(n+length) /*选择大于等于length后面的元素*/ :nth-child(-n+length) /*选择小于等于length前面的元素*/ :nth-child(n*length+1) /*表示隔几选一*/ :nth-child(2n) / :nth-child(even) /*表示偶数*/ :nth-child(2n+1) / :nth-child(odd) /*表示奇数*/
:...-child和:...-of-type的差异这两个系列的属性确实很相似，对于不熟悉的人可能很难区分。
E:first-of-type 总是能命中父元素的第1个为E的子元素，不论父元素第1个子元素是否为E；而E:first-child里的E元素必须是它的兄弟元素中的第一个元素，否则匹配失效。E:last-of-type 与E:last-child也是同理。E:nth-of-type(n)总是能命中父元素的第n个为E的子元素，不论父元素第n个子元素是否为E；而E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。
关于:nth-child()与:nth-of-type()的区别可以看这篇文章
:empty区分空元素选择不包含子元素的p元素：
p:empty
选择包含子元素的p元素：
p:not(:empty)
| 选择器 | 描述 |
|---|---|
E:before/E::before
|
在目标元素E的前面插入的内容。用来和content属性一起使用 |
E:after/E::after
|
在目标元素E的后面插入的内容。用来和content属性一起使用 |
E:first-letter/E::first-letter
|
设置元素内的第一个字符的样式 |
E:first-line/E::first-line
|
设置元素内的第一行的样式 |
E::placeholder |
设置元素文字占位符的样式。(一般用于input输入框) |
E::selection |
设置元素被选择时的字体颜色和背景颜色 |
注意事项：
::placeholder在使用时需要加上各个浏览器的前缀；除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder。
选择器用得好其实可以让我们少些很多代码。其实还有一些东西没有展开来讲，比如:before和:after，后面专门写一篇文章来说。
更多CSS选择器整理相关文章请关注PHP中文网！
Apakah jenis pemilih css yang ada?
Bagaimana untuk menukar huruf kecil kepada huruf besar dalam bahasa c
Bagaimana untuk menetapkan teks teratas pada WeChat
Sistem oa percuma secara kekal
Bagaimana penderia suhu berfungsi
Apakah maksud dhcp?
Bagaimana untuk menyambung ke pangkalan data dengan sqlplus
Pengenalan kepada perisian lukisan seni bina
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
