CSS - 常用的伪类选择器简单介绍与基本使用

前言

CSS 伪类选择器用于选择元素的特定状态或位置,以便对其应用样式。以下是一些常见的伪类选择器及其作用。

一、常用的伪类选择器

(1):hover 伪类选择器:当鼠标悬停在元素上时触发。常用于添加交互效果。
(2):active 伪类选择器:当元素被激活(例如,用户点击它)时触发。常用于添加点击效果。
(3):focus 伪类选择器:当元素获得焦点(例如,用户点击或通过 Tab 键导航到它)时触发。常用于添加表单元素的样式。
(4):first-child 伪类选择器:选择元素的第一个子元素。常用于添加列表项的样式。
(5):last-child 伪类选择器:选择元素的最后一个子元素。常用于添加列表项的样式。
(6):nth-child() 伪类选择器:选择元素的第 n 个子元素。可以使用表达式来选择不同的子元素。例如,:nth-child(2n) 选择偶数子元素,:nth-child(3n+1) 选择第 1、4、7、10 个子元素。
(7):nth-of-type() 伪类选择器:选择同一类型的元素中的第 n 个元素。例如,:nth-of-type(2n) 选择偶数元素。
(8):not() 伪类选择器:选择不匹配指定选择器的元素。例如,:not(.class) 选择没有 .class 类的元素。
(9):checked 伪类选择器:选择被选中的表单元素(例如,复选框或单选按钮)。
(10):disabled 伪类选择器:选择被禁用的表单元素。
(11):empty 伪类选择器:选择没有子元素的元素。
(12):target 伪类选择器:选择当前活动的锚点目标元素。常用于制作页面内跳转。

二、:伪类选择器之nth-of-type(n)与:nth-child(n)的区别

(1):nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型,n 可以是数字、关键词或公式。
(2):nth-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素,元素类型没有限制;n可以是数字、关键词或公式。

三、示例代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0; padding: 0; border: none;}

		div p {text-align: center;}
		div p input[type^=text] {width: 200px; height: 30px; margin: 7px; border: 1px solid #eee; border-radius: 4px; outline: none; text-indent: 10px;}
		div p input[type^=text]:focus {border-color: #5e7ce0;}
		div p input[type^=checkbox] {margin: 7px; cursor: pointer;transition: all ease 0.1s;}
		div p input[type^=checkbox]:checked {outline-offset: 4px; outline-color: #5e7ce0; outline-style: dashed; outline-width: thin;}
		div p button {width: 200px; height: 30px; margin: 7px; background-color: #5e7ce0; border-radius: 4px; color: #fff;}
		div p button:hover {background-color: lightcoral;}
		div p button:active {background-color: lightpink;}

		section:empty {width: 100%; height: 30px; background-color: lightblue;}
		section :first-child {color: blue;}
		section p:nth-child(5) {color: red;}
		section span:nth-of-type(3) {color: green;}
		section :last-child {color: purple;}
		section :not(p) {text-shadow: 0 0 10px #000;}

		ul :first-child {color: blue;}
		ul li:nth-child(2n) {color: red;}
		ul li:nth-of-type(2n) {background-color: yellow;}
	</style>
</head>
<body>
	<div>
		<p><input type="text" placeholder="请输入..." /></p>
		<p>
			<input type="checkbox" name="" label="是" value="male" checked>
		</p>
		<p><button>完成</button></p>
	</div>

	<section></section>

	<section>
		<p>第1个P标签</p>
		<p>第2个P标签</p>
		<p>第3个P标签</p>
		<span>第1个SPAN标签</span>
		<p>第4个P标签</p>
		<span>第2个SPAN标签</span>
		<span>第3个SPAN标签</span>
		<p>第5个P标签</p>
		<span>第4个SPAN标签</span>
	</section>

	<ul>
		<p>帅龍之龍</p>
		<li>第一项</li>
		<li>第二项</li>
		<li>第三项</li>
		<li>第四项</li>
		<li>第五项</li>
		<li>第六项</li>
		<li>第七项</li>
		<li>第八项</li>
		<li>第九项</li>
		<li>第十项</li>
	</ul>
</body>
</html>

四、运行效果

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值