CSS 伪类选择器

最新推荐文章于 2023-01-22 20:03:56 发布

Ranx3

最新推荐文章于 2023-01-22 20:03:56 发布

阅读量86

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_41472891/article/details/113184680

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

结构伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
/* 			:root{
				border:1px red solid
			} */
/* 			ul>li:first-child{
				color:red;
			}/* 伪类加前置元素限制范围 */
		/* 	ul>li:only-child{
				color:red;
			}
			div>p:only-of-type{
				color:red;
			} */ 
/* 			ul>li:nth-child(2){
				color:red;
			} */
			div>p:nth-of-type(2){
				color:red;
			} 
		</style>
	</head>
	<body>
		<ul>
			<li>21</li>
			<li>22</li>
		</ul>
		<ul>
			<li>21</li>
		</ul>
		<div>
			<p>11</p>
			<span>222</span>
		</div>
		<div>
			<p>11</p>
			<p>11</p>
		</div>
	</body>
</html>

UI伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
	/* 		input:disabled{
				border: 1px red solid;
			}
			input:enabled{
				border: 1px blue solid;
			}
			input:checked{
				display: none;
			}
			input:default{
				display: none;  默认元素被隐藏 
			}*/
* 			input:valid{
				border:1px solid green;
			}
			input:invalid{
				border:1px solid red;
			}/* 验证无效 */ 
			input:required{
				border:1px solid red;
			}
		</style>
	</head>
	<body>
		<form>
			<input type="text" required="required" />
			<input type="text"  disabled="disabled"/>
			<input type="checkbox" checked="checked"/>
			<input type="email" />
		</form>
	</body>
</html>

动态伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
/* 			a:link{
				color:red;
			}
			a:visited{
				color:yellow;
			}
			a:hover{
				color:blue;
			}
			a:active{
				color:black;
			}
			input:focus{
				border: 1px solid red;
			} */
		
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.haosou.com">好搜</a>
		<input type="text" />
	</body>
</html>

其他伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a:not([href*="baidu"]){
				color:yellow;
			}
			/* 将没有内容的元素隐藏 */
/* 			b:empty{
				display: none;
			}
			p:lang(en){
				color:red
			} */
			/* 定位到锚点 */
/* 			b:target{
				color:red
			} */
			/* 被选中的 */
			::selection{
				color:red
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.haosou.com">好搜</a>
		<b>sas</b>
		<b></b>
		<b>sas</b>
		<p lang="en">sss</p>
		<b id="target1">ceshi1</b>
	</body>
</html>