CSS伪类选择器

高鹏飞白羊

于 2019-10-08 13:01:19 发布

阅读量112

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_43755916/article/details/102378337

版权

web前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

：link :visited :hover :active :focus

1,目标伪类（锚点）

突出显示活动的HTML锚点标签，匹配被激活的锚点元素
element:target{}

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
	*{margin:0;padding:0}		
		h4{
			height:400px;
			background:#ddd;
			display:none;
			}
		h4:target{
			display:block;
		}
	</style>
	</head>
	<body>
		<div>
			<a href="#no1">火影</a>
			<a href="#no2">海贼</a>
			<a href="#no3">奥特曼</a>
		</div>
		<h4 id="no1">火影 大数据分析的产生旨在于IT管理，企业可以将实时数据流分析和历史相关数据相结合，然后大数据分析并发现它们所需的模型。反过来，帮助预测和预防未来运行中断和性能问题。进一步来讲，他们可以利用大数据了解使用模型以及地理趋势，进而加深大数据对重要用户的洞察力。 他们也可以追踪和记录网络行为，大数据轻松地识别业务影响；随着对服务利用的深刻理解加快利润增长；同时跨多系统收集数据发展IT服务目录。</h4>
		<h4 id="no2">海贼 大数据分析的产生旨在于IT管理，企业可以将实时数据流分析和历史相关数据相结合，然后大数据分析并发现它们所需的模型。反过来，帮助预测和预防未来运行中断和性能问题。进一步来讲，他们可以利用大数据了解使用模型以及地理趋势，进而加深大数据对重要用户的洞察力。 他们也可以追踪和记录网络行为，大数据轻松地识别业务影响；随着对服务利用的深刻理解加快利润增长；同时跨多系统收集数据发展IT服务目录。</h4>
		<h4 id="no3">奥特曼 大数据分析的产生旨在于IT管理，企业可以将实时数据流分析和历史相关数据相结合，然后大数据分析并发现它们所需的模型。反过来，帮助预测和预防未来运行中断和性能问题。进一步来讲，他们可以利用大数据了解使用模型以及地理趋势，进而加深大数据对重要用户的洞察力。 他们也可以追踪和记录网络行为，大数据轻松地识别业务影响；随着对服务利用的深刻理解加快利润增长；同时跨多系统收集数据发展IT服务目录。</h4>
	</body>
</html>

练习：

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
	*{margin:0;padding:0}		
		img{
			height:400px;
			background:#ddd;
			display:none;
			}
		img:target{
			display:block;
		}
	</style>
	</head>
	<body>
		<div>
			<a href="#no1">火影</a>
			<a href="#no2">海贼</a>
			<a href="#no3">奥特曼</a>
		</div>
			<img src="../img/奥特曼.jpg" id="no3">
			<img src="../img/火影.jpg" id="no1">
			<img src="../img/海贼.jpg" id="no2">
	</body>
</html>

结构伪类

1，:first-child
匹配的是该元素的父元素的第一个孩子----这个元素的大哥
2，last-child
匹配的是该元素的父元素的最后一个孩子
3，nth-child(n)
匹配的是该元素的父元素的第n个孩子

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}		
		p:first-child{background:#f00;}
	</style>
	</head>
	<body>
		<div>
			<p>火影</p>
			<p>海贼</p>
			<p>奥特曼</p>
			<p>刀剑神域</p>
			<p>灌篮高手</p>
		</div>
			
	</body>
</html>

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}		
		p:first-child{background:#f00;}
		p:last-child{background:#00f;}
		p:nth-child(2){background:#0f0;}
		p:nth-child(3){background:#aaa;}
	</style>
	</head>
	<body>
		<div>
			<p>火影</p>
			<p>海贼</p>
			<p>奥特曼</p>
			<p>刀剑神域</p>
			<p>灌篮高手</p>
		</div>
			
	</body>
</html>

练习：

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}	
			table{
			width:400px;
			height:400px;
			border:2px solid #000;
			}
			tr:first-child{background:#00f;}
			tr:last-child{background:#ffe100;}
			tr:nth-child(3) td:nth-child(2){
				background:#f00;
				font-size:28px;
			}
	</style>
	</head>
	<body>
		<table>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>	
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

empty 匹配没有子元素的元素

注意：回车，空格，文本都不能写才算没有子元素

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}	
			table{
			width:400px;
			height:400px;
			border:2px solid #000;
			}
			tr:first-child{background:#00f;}
			tr:last-child{background:#ffe100;}
			tr:nth-child(3) td:nth-child(2){
				background:#f00;
				font-size:28px;
			}
			div:empty{width:100px;height:100px;background:#f00;}
	</style>
	</head>
	<body>
		<div></div>
		<table>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>	
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
		</table>
	</body>
</html>

only-child 匹配的元素是父元素中唯一的子元素

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}	
			table{
			width:400px;
			height:400px;
			border:2px solid #000;
			}
			tr:first-child{background:#00f;}
			tr:last-child{background:#ffe100;}
			tr:nth-child(3) td:nth-child(2){
				background:#f00;
				font-size:28px;
			}
			div:empty{width:100px;height:100px;background:#f00;}
			p:only-child{
			width:100px;
			height:100px;
			background:#00f;}
	</style>
	</head>
	<body>
	<div>
			<p>12222223</p>
			<p>33333</p>
		</div>
		<div>
			<p>12333333</p>
		</div>
		<table>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>	
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
		</table>
	</body>
</html>

否定伪类

:not将指定选择器的元素。排除在外
语法：
:not(selector){}

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}	
			table{
			width:400px;
			height:400px;
			border:2px solid #000;
			}
			tr:first-child{background:#00f;}
			tr:not(:last-child){background:#ffe100;}
			tr:nth-child(3) td:nth-child(2){
				background:#f00;
				font-size:28px;
			}
			div:empty{width:100px;height:100px;background:#f00;}
			p:only-child{
			width:100px;
			height:100px;
			background:#00f;}
		
	</style>
	</head>
	<body>
	<div>
			<p>12222223</p>
			<p>33333</p>
		</div>
		<div>
			<p>12333333</p>
		</div>
		<table>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>	
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
		</table>
	</body>
</html>

高鹏飞白羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS伪类选择器

：link :visited :hover :active :focus1,目标伪类（锚点）突出显示活动的HTML锚点标签，匹配被激活的锚点元素element:target{}<!doctype html><html> <head> <title></title> <meta charset="utf-8">...
复制链接

扫一扫