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

: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>

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

已标记关键词 清除标记
相关推荐
<div> 适用人群 <p> Java开发人员,Vue开发人员,前后端分离开发人员,权限管理和配置开发人员 </p> </div> <div> 课程概述 <div style="color:#666666;"> 【讲师介绍】<br /> 讲师职称:<br />               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。<br />             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。 <br /> 【课程介绍】<br /> 技术选型<br /> 开发环境:Eclipse/Idea ,JDK 1.8以上 <br /> 后端技术<br /> 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):    <br /> 持久层框架:MyBatis 3.x + Mybatis-plus 3.x<br /> 日志管理:SLF4J 1.7 + Log4j2 2.7<br /> 工具:Apache Commons、Jackson 、fastjson、Gson<br /> 权限验证<br /> 前端技术  <br /> Vue  <br /> Vue-cli<br /> ElementUI ---https://element.eleme.io/<br /> JSX (JavaScript Xml)<br /> 前台的权限验证和路由设置<br /> 开发模式  <br />      前后端分离的开发<br /> 数据库 <br />       Mysql5<br /> IDE<br />     Intellij Idea </div> </div>
<div style="color:#444444;"> 适用人群 <p style="color:#666666;"> Java开发人员,Vue开发人员,前后端分离开发人员,权限管理和配置开发人员 </p> </div> <div style="color:#444444;"> 课程概述 <div style="color:#666666;"> 【讲师介绍】<br /> 讲师职称:<br />               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。<br />             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。 <br /> 【课程介绍】<br /> 技术选型<br /> 开发环境:Eclipse/Idea ,JDK 1.8以上 <br /> 后端技术<br /> 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):    <br /> 持久层框架:MyBatis 3.x + Mybatis-plus 3.x<br /> 日志管理:SLF4J 1.7 + Log4j2 2.7<br /> 工具:Apache Commons、Jackson 、fastjson、Gson<br /> 权限验证<br /> 前端技术  <br /> Vue  <br /> Vue-cli<br /> ElementUI ---https://element.eleme.io/<br /> JSX (JavaScript Xml)<br /> 前台的权限验证和路由设置<br /> 开发模式  <br />      前后端分离的开发<br /> 数据库 <br />       Mysql5<br /> IDE<br />     Intellij Idea </div> </div>
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页