css-目标伪类选择器:target的应用
目标伪类选择器:target是众多CSS3众多 动态 伪类选择器中的一个,用来匹配锚点指向的元素,突出显示活动的HTML锚。
<style>
div:target{
border: 2px solid black;
background: red;
}
</style>
<body>
<p>
<a href="#nei1">指向内容一</a><br>
</p>
<p>
<a href="#nei2">指向内容二</a>
</p> <divid="nei1">这是内容一</div>
<divid="nei2">这是内容二</div> </body>
该类选择器是动态选择器,只有在该选择器以指向元素时,才能使用。

当点击"指向内容一"时,"这是内容一"的样式表会改变。
当选择器前面不写任何标签时,则该选择器会覆盖所有具有此类属性的元素。
css-目标伪类选择器:target的应用的更多相关文章
- [转]CSS目标伪类E:target
CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换) 是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是 ...
- CSS动态伪类选择器温故-3
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS动态伪类选择器温故
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
- HTML&CSS基础-伪类选择器
HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- CSS中伪类选择器及伪元素
1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...
- 前端开发HTML&css入门——伪类选择器和一些特殊的选择器
伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...
- css之伪类选择器:before :after(::before ::after)
一.总结: ::before是在标签内容前面添加内容, ::after是在标签内容后面添加内容 ::before ::after与:before :after的区别:css3中修订后的伪元素使用:: ...
- 【CSS3】---结构性伪类选择器-root+not+empty+target
结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...
随机推荐
- jffs2镜像制作
自己被自己绊住了,出于对无知的恐惧,总觉得是很难的一件事情. demo board ltp-ddt qspi_mtd_dd_rw error:can't read superblock on /dev ...
- Flutter的DateTime轉換的各種方法
概述: 表示一个时间点 通过构造函数或解析格式化的字符串创建DateTime对象,并且符合ISO 8601标准的子集,小时是24小时制,范围在0-23之间 DateTime对象创建之后,将是固定不变的 ...
- leetcode-15双周赛-1287-有序数组中出现次数超过25%的元素
题目描述: 方法一:二分法 class Solution: def findSpecialInteger(self, arr: List[int]) -> int: span = len(arr ...
- Ext js-01 -helloworld
一.下载ext: 登陆这个网址 https://www.sencha.com/products/evaluate/ 下载下来解压后如下:安装cmd程序 二.开始helloworld 新建一个idea ...
- 存储系统设计——NVMe SSD性能影响因素一探究竟
目录1 存储介质的变革 2 NVME SSD成为主流 2.1 NAND FLASH介质发展 2.2 软件层面看SSD——多队列技术 2.3 深入理解SSD硬件 3 影响NVME SSD的性能因素 3. ...
- php chunk_split()函数 语法
php chunk_split()函数 语法 作用:把字符串分割为一连串更小的部分.东莞大理石平板 语法:chunk_split(string,length,end) 参数: 参数 描述 string ...
- 七、单例设计模式共享数据分析、解决、call_once
一.设计模式大概谈 代码的一些写法,与常规的写法不太一样,程序灵活,维护起来很方便,但是别人接管.阅读代码很痛苦. 用设计模式理念写出来的代码很晦涩.<< head first>&g ...
- flutter页面布局二
Stack 在flutter中,Stack表示堆的意思,可以用来实现页面的定位布局. Stack组件接收两个可选参数: alignment:配置所有子元素的显示位置 children:子组件 在 ...
- CSS定位,转载的
转自:http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html 层级关系为:<div ——————————— posit ...
- Linux随笔 - 修改主机名
1.临时修改主机名: hostname 主机名 修改只能临时有效,机器重启后会自动还原. 2.永久修改主机名: 修改hostname文件(路径:/etc/sysconfig/network),把hos ...