伪类选择器

最新推荐文章于 2022-11-02 23:34:40 发布

喵咪那个汪~

最新推荐文章于 2022-11-02 23:34:40 发布

阅读量392

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_42675177/article/details/81663776

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

目标伪类

1、作用
       突出显示活动的HTML锚元素。匹配当前页面中活动的HTML锚元素。
   2、语法
     :target

<!doctype html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<style>
	:target {background: yellow;}
	a[name] {display: none;
	}

	#NO2 {
		display: none;
	}

	a[name]:target {
		display: block;
	}

	#NO2:target {
		display: block;
	}
</style>
</head>
<body>
<div>
	<a href="#NO1">1</a><br>
	<a href="#NO2">2</a><br>
</div>
	<a name="NO1">目标1</a>
	<div id="NO2">目标2</div>
</body>
</html>

元素状态伪类

1、作用
元素状态：启用，禁用，被选中(checked)
   2、语法
       :enabled , 匹配每个已启用元素(表单控件)
       :disabled , 匹配每个已禁用元素(表单控件)
       :checked , 匹配每个被选中元素(radio,checkbox)

结构伪类(重点)

1、:first-child
       匹配属于其父元素中的首个子元素
   2、:last-child
       匹配属于其父元素中的最后一个子元素
   3、:nth-child(n)
       匹配属于其父元素中的第n个子元素
   4、:empty
       匹配没有子元素(包含文本)的每个元素

<div></div>

5、:only-child
匹配属于其父元素中的唯一子元素

<div>
   <p>Hello World</p>
</div>

否定伪类

1、语法
:not(选择器)
2、作用：将满足选择器的元素从指定范围中排除

喵咪那个汪~

关注

0
点赞
踩
1

收藏

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

目标伪类 1、作用突出显示活动的HTML锚元素。匹配当前页面中活动的HTML锚元素。 2、语法 :target&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;标题&lt;/title&gt;&lt;meta charset="utf-8"&gt;&lt;style
复制链接

扫一扫

专栏目录