CSS3 结构性伪类选择器—target（实现点击按钮显示内容）

最新推荐文章于 2024-06-13 21:20:19 发布

若年封尘

最新推荐文章于 2024-06-13 21:20:19 发布

阅读量2.4k

点赞数 5

分类专栏： # CSS 前端文章标签： css css-target 伪类选择器点击按钮实现内容 html

本文链接：https://blog.csdn.net/zag666/article/details/99689312

版权

前端同时被 2 个专栏收录

128 篇文章 11 订阅

订阅专栏

CSS

34 篇文章 0 订阅

订阅专栏

:target 选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

单个url（单个target）处理：

HTML代码：

   <p><a href="#ex">显示按钮</a></p>
    <div class="example" id="ex">
      单个target示例
    </div>

CSS代码：

.example{
  display: none;
}
:target{/*因为只有一个，所以这里的:target就默认是指id="ex"的div对象*/
  display:block;
}

浏览器实现结果：
在这里插入图片描述

1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#ex

2、：target就是用来匹配id为“XXX”的元素（id="XXX"的元素）,上面代码中是那个div元素。

多个url（多个target）处理：

就像上面的例子，#ex与后面的id=“ex"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=”"中的名称对应就可以了，如下面例子：

HTML代码：

<h2><a href="#ex1">显示按钮1</a></h2>
<div class="example" id="ex1">
  示例1
</div>
<h2><a href="#ex2">显示按钮2</a></h2>
<div class="example" id="ex2">
 示例2
</div>
<h2><a href="#ex3">显示按钮3</a></h2>
<div class="example" id="ex3">
   示例3
</div>

CSS代码：

#ex1:target {
  background: orange;
  color: #fff;
}
#ex2:target {
  background: blue;
  color: #fff;
}
#ex3:target {
  background: red;
  color: #fff;
}

浏览器显示结果：（当按下按钮，相应下方示例会做出改变）
在这里插入图片描述

div中有多个元素时，若想单独改变div中的某个元素（如p元素），则应在target后空格再加要显示元素p：（下例中如果不加p则a标签跟着也会改变）

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>结构性伪类选择器—target</title>
<style>
#ex4:target p{ 
	 background: orange;
     color: #fff;}
</style>
</head> 
<body>
    <div class="example" id="ex4">
        <h2><a href="#ex4">显示按钮4</a></h2>
        <p>示例4</p>
    </div>
</body>
</html>

浏览器显示结果：
在这里插入图片描述