css——伪类选择器-优快云博客

伪类选择器

概念：

很像类，但不是类，是元素特殊状态的一种描述
选中特殊状态的元素

动态伪类

未访问过的链接

<style>
	a:link{
		[属性]
	}
</style>

访问过的链接

<style>
	a:visited{
		[属性]
	}
</style>

visited:参观

鼠标悬浮状态下的元素

<style>
	选择器:hover{
		[属性]
	}
</style>

hover:盘旋

鼠标按住状态的元素

<style>
	选择器:active{
		[属性]
	}
</style>

active:激活的；积极的

注意以上伪类选择器的顺序不能变动（快记{lvha}）

link:访问过的链接

visited:未访问过的链接

hover:盘旋

active:激活的；积极的

获取焦点的元素

<style>
	能输入的元素:focus{
		[属性]
	}
</style>

focus:集中；焦点

结构伪类

选中父级下的第一个子级元素

<style>
	选择器:frist-child{
		[属性]
	}
</style>

提示

若为【标签选择器】则自动寻找父级
按照所有兄弟元素计算

选中父级下的最后一个子级元素

<style>
	选择器:last-child{
		[属性]
	}
</style>

提示

若为【标签选择器】则自动寻找父级
按照所有兄弟元素计算

选中父级下的第n个子级元素

<style>
	选择器:nth-child(n){
		[属性]
	}
</style>

提示

nth:第n个
n为自然计数
2n或even则选中所有偶数位元素
odd则选中所有奇数位元素
-n+x；x是要选取到哪一个元素的值
官方定义的形式为’an+b’
若为【标签选择器】则自动寻找父级
按照所有兄弟元素计算

选中第一个【选择器2】类型的元素

<style>
	选择器>选择器2:frist-of-type{
		[属性]
	}
</style>

提示

子代选择器为条件
按照所有同类型兄弟元素计算

选中最后一个【选择器2】类型的元素

<style>
	选择器>选择器2:last-of-type{
		[属性]
	}
</style>

提示

子代选择器为条件
按照所有同类型兄弟元素计算

选中的符合【选择器2】第n个子级元素

<style>
	选择器>选择器2:nth-of-type(n){
		[属性]
	}
</style>

提示

nth:第n个
n为自然计数
2n或even则选中所有偶数位元素
odd则选中所有奇数位元素
-n+x；x是要选取到哪一个元素的值
官方定义的形式为’an+b’
子代选择器为条件
按照所有同类型兄弟元素计算

结构伪类(不常用)

选中的符合【选择器2】第n个子级元素(从下往上)

<style>
	选择器>选择器2:nth-last-child(n){
		[属性]
	}
</style>

提示

nth:第n个
n为自然计数
2n或even则选中所有偶数位元素
odd则选中所有奇数位元素
-n+x；x是要选取到哪一个元素的值
官方定义的形式为’an+b’
按照所有同类型兄弟元素计算
从下往上

选中的符合【选择器2】第n个子级元素(从下往上)

<style>
	选择器>选择器2:nth-last-of-type(n){
		[属性]
	}
</style>

提示

nth:第n个
n为自然计数
2n或even则选中所有偶数位元素
odd则选中所有奇数位元素
-n+x；x是要选取到哪一个元素的值
官方定义的形式为’an+b’
子代选择器为条件
按照所有同类型兄弟元素计算
从下往上
有筛选的用处

选中父级中只有唯一的子级标签(没有兄弟的元素)

<style>
	选择器:only-child{
		[属性]
	}
</style>

提示

【标签选择器】自动寻找父级元素

选中父级中没有同类型兄弟的子级元素

<style>
	选择器:only-of-type{
		[属性]
	}
</style>

提示

【标签选择器】自动寻找父级元素
没有同类型的元素

选中根元素<html>

<style>
	:root{
		[属性]
	}
</style>

root:根

选中【选择器】下为空的标签；例<div></div>

<style>
	选择器:empty{
		[属性]
	}
</style>

提示

空就是空，就是啥也没有，啥也不能有

否定伪类

排除满足括号中条件的元素

<style>
	选择器:not(选择器2){
		[属性]
	}
</style>

UI伪类

解释:用户界面

选中的勾选的复选框

<style>
   选择器：checked{
   	[属性]
   }
</style>

提示

用于复选框<input type="checkbox">
用于复选框<input type="radio" name="">
对背景色无用