大家好，又见面了，我是你们的朋友全栈君。
CSS3选择器分为：结构型伪类选择器、UI元素状态伪类选择器，否定选择器，和伪元素
一、结构型伪类选择器
- :first-child选择某个元素的第一个子元素；
- :last-child选择某个元素的最后一个子元素；
- :nth-child()选择某个元素的一个或多个特定的子元素；
- :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
- :nth-of-type()选择指定的元素；
- :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
- :first-of-type选择一个上级元素下的第一个同类子元素；
- :last-of-type选择一个上级元素的最后一个同类子元素；
- :only-child选择的元素是它的父元素的唯一一个了元素；
- :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
- :empty选择的元素里面没有任何内容。
二、UI元素状态伪类选择器
1、动态伪类（也称为“锚点伪类”）
.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/
.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/
.demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/
.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/需要遵循爱恨规则：LoVe/HAte，也就是Link – Visited – Hover – Active
- :hover用于当用户把鼠标移动到元素上面时的效果；
- :active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
- :focus用于元素成为焦点，这个经常用在表单元素上。
2、UI元素状态伪类，比如有“:enabled”,”:disabled”,”:checked”
三、否定选择器，比如”:not”
input:not([type="submit"]) {
border: 1px solid red;
}四、伪元素
CSS中的伪元素有”:first-line”,”first-letter”,”:before”,”:after”，CSS3是在以前的基础上增加了一个”:”，也就是变成了”::first-line”,”::first-letter”,”::before”,”::after”，另外还新增了一个”::selection”，两个”::”和一个”:”只是CSS3中用来区分伪类和伪元素，这两种方式都是被接受的。
::first-line：选中元素的第一行
::first-letter：选中元素的第一个字母
::before和::after这两个主要用来给元素的前面或后面插入内容，通常和”content”一起配合使用，经常用来清除浮动。
.clearfix::before,.clearfix::after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix::after {
clear: both;
}
.clearfix {
zoom: 1;
}::selection 是用来改变浏览网页选中问的默认效果。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/157233.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
