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>. 示例演示: 通 ...
随机推荐
- XC6SLX45T-2FGG484C 原厂订购 原装正品
作为一家科研公司,保证的原厂品质和正规采购渠道是科学严谨的研发工作中重要的一环,更是保证研发产品可靠.稳定的基础.而研发中所遇到的各种不可预测的情况更是每个工程师向技术的山峰攀登中时会遇到的各种难题. ...
- go语言从例子开始之Example39.使用函数自定义排序
有时候我们想使用和集合的自然排序不同的方法对集合进行排序.例如,我们想按照字母的长度而不是首字母顺序对字符串排序.这里是一个 Go 自定义排序的例子. Example: package main im ...
- java 继承访问成员变量
package java09; //创建父类 public class Fu { int numFu = 10; int num =100; public void methodFu(){ Syste ...
- java一个对象使用内存
- oracle的分析函数over
参考地址:https://www.cnblogs.com/chinas/p/7058771.html?utm_source=itdadao&utm_medium=referral#_lab2_ ...
- WPF 几种常用控件样式的总结
这里把wpf中几种常用样式总结一下,后期可以直接拷贝使用,呵呵 一.Button <ResourceDictionary xmlns="http://schemas.microsoft ...
- 基于vue的移动端web音乐播放器
声明 以下只是学习完慕课网huangyi老师实战视频课程的笔记内容,仅供个人参考学习使用.如果对Vue2.0实战高级-开发移动端音乐WebApp感兴趣的话,请移步这里:https://coding.i ...
- 苹果的AR赌注仍然有很多需要证明的
苹果公司为开发者主题发布会做准备,其中一个更大的公告很可能是其增强现实平台的新变化.自从去年宣布ARKit以来,这家科技巨头几乎对其对AR的潜力抱有信心. 在很多讨论背后,人们都相信技术的实用性,但在 ...
- 7.使用dom4j实现增删改查
1.导入dim4j提供的jar包 (1)dom4j,是一个组织,针对xml解析,提供解析器dom4j (2)dom4j不是javase的一部分(jaxp是的) (3)使用dom4j步骤 - 下载并导入 ...
- js手机号码中间用星号代替。银行卡后四位之外改为星号
如手机号码13123456789,中间四位用'*'代替 var phone='13123456789' 方法1(字符串的截取): ,)+); 方法2(正则表达式): })\d{}(\d+)/,&quo ...