结构化伪类选择器

最新推荐文章于 2023-06-04 14:34:23 发布

qq_40891002

最新推荐文章于 2023-06-04 14:34:23 发布

阅读量811

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_40891002/article/details/105755462

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

：root选择器

:root选择器用于匹配文档根元素，在HTML中，根元素始终是html，也就是说使用":root 选择器"定义的样式，对所有的页面元素都生效，对不需要该样式的元素，可以单独设置样式以进行覆盖。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
:root{color: red;}
h2{color:blue}
</style>
</head>

<body>
<h2>面朝大海，春暖花开</h2>
<p>从明天起做个幸福的人 
   喂马，劈柴，周游世界 
   从明天起关心粮食和蔬菜
   我有一所房子
   面朝大海春暖花开</p>
</body>
</html>

:not选择器

如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用：not选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
body *:not(h2){
	color:orange;
	font-size: 20px;
	font-family: "宋体";
}
</style>
</head>

<body>
<h2>世界上最远的距离</h2>
<p>世界上最远的距离</p>
<p>不是生与死的距离</p>
<p>而是我站在你面前</p>
<p>你却不知道我爱你</p>
</body>
</html>

"body *:not(h3)"选择器用于排除body结构中的子结构h3

:only-child 选择器

匹配用于某父元素的唯一子元素的元素，也就是说，某父元素只有一个子元素时则使用"only-child选择器"的用法进行演示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
li:only-child{color:red;}
</style>
</head>

<body>
<div>
	国内电影:
	<ul>
		<li>一代宗师</li>
		<li>叶问</li>
		<li>非诚勿扰</li>
	</ul>
	美国电影:
	<ul>
		<li>侏罗纪世界</li>
	</ul>
</div>
</body>
</html>

：first-child和:last-child选择器

分别用于为父元素的第一个和最后一个子元素设置样式

：nth-child(n) 和 nth-last-child(n)选择器

分别用于选择父元素的第n个元素，或者选择父元素的倒数第n个元素

:nth-of-type(n) 和 :nth-last-of-type(n)选择器

用于匹配属于父元素的特定类型的第n个子元素和倒数第n个子元素，与元素类型无关

:empty选择器

用来选择没有子元素或文本内容为空的所有元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p{
	width:150px;
	height:30px;
}
:empty{
	background-color: red;
}
</style>
</head>

<body>
<p>北京市</p>
<p>上海市</p>
<p></p>
<p>郑州市</p>
</body>
</html>

:target选择器

用于为某个页面的target 元素（该元素的id 被用作页面的超链接来使用）指定样式，只有用户单击了超链接，并且跳转到target 元素后，target选择器所设置的样式才会起作用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
:target{background-color:red;}
</style>
</head>

<body>
<p><a href="#new2">北京市</a></p>
<p><a href="#new1">上海市</a></p>
<p>郑州市</p>
</body>
</html>

点击链接时变红！！！

qq_40891002

关注

1
点赞
踩
2

收藏

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

：root选择器:root选择器用于匹配文档根元素，在HTML中，根元素始终是html，也就是说使用":root 选择器"定义的样式，对所有的页面元素都生效，对不需要该样式的元素，可以单独设置样式以进行覆盖。<!DOCTYPE html><html><head><meta charset="utf-8"> <title>...
复制链接

扫一扫