CSS3新增伪类--好用的:target
问：如果让你实现下图，点击跳转后，让内容1增加一个背景颜色，你会怎么做呢？
可能很多小伙伴第一反应是用JS，给跳转绑定点击事件，然后用DOM获取到内容1，在给其添加css样式。
如果我跟你说用css来实现，你会不会一脸蒙蔽，然后想骂人。哈哈哈。其实用CSS3新增的伪类：target就能轻松搞定。
W3C是这样定义的，如下图：
并且该伪类兼容性也很好，现代浏览器都支持，只有ie8及以下不支持。
有兴趣的小伙伴可以试试下面我写的demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
background-color: #000;
}
a {
color: #fff;
font-size: 30px;
}
.one,.two,.three {
margin: 150px 0;
}
/*通过伪类:target获取点击事件*/
.one:target {
color: #fff;
font-size: 40px;
}
.two:target {
color: #CD5C5C;
font-size: 40px;
}
.three:target {
color: cadetblue;
font-size: 40px;
}
</style>
</head>
<body>
<a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a> <div id="one" class="one">123</div>
<div id="two" class="two">456</div>
<div id="three" class="three">789</div>
</body>
</html>
补充：其实CSS3还新增了很多好用的伪类。比如，:root（选择文档的根元素），:disabled（选择每个禁用的 <input> 元素）
详见：http://www.w3school.com.cn/cssref/css_selectors.asp
CSS3新增伪类--好用的:target的更多相关文章
- CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性
CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1) id选择器(# myid) ...
- CSS3新增伪类汇总
:root 选择文档的根元素,等同于 html 元素 :empty 选择没有子元素的元素 :target 选取当前活动的目标元素 :not(selector) 选择除 selector 元素意外的元素 ...
- CSS3新增伪类
p:last-of-type 选择其父元素的最后的一个P元素 p:last-child 选择其父元素的最后子元素(一定是P才行) p:first-of-type ...
- CSS3新增伪类有那些？
p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child ...
- CSS3 结构性伪类选择器（1）
1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元 ...
- CSS3 结构伪类选择器 详解
1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...
- Atitit.隔行换色 变色 css3 结构性伪类选择器
Atitit.隔行换色 变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...
- CSS3 :nth-child()伪类选择器
CSS3 :nth-child()伪类选择器 CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好 的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标 准已提出数年 ...
- CSS3 结构性伪类选择器（2）
CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...
随机推荐
- 14. Redis配置统计字典
14. Redis配置统计字典14.1 info系统状态说明14.1.1 命令说明14.1.2 详细说明14.2 standalone配置说明和分析14.2.1 总体配置14.2.2 最大内存及策略1 ...
- 分割list，将集合按规定个数分为n个部分。
/** * 按指定大小,分隔集合,将集合按规定个数分为n个部分 * * @param list * @param len * @return */ public static <T> Li ...
- URL安全的Base64编码，解码
Base64 可以将二进制转码成可见字符方便进行http传输,但是base64转码时会生成“+”,“/”,“=”这些被URL进行转码的特殊字符,导致两方面数据不一致. 我们可以在发送前将“+”,“/” ...
- Mysql必知必会 第一章 了解SQL
第一章 了解SQL 1.1 数据库基础 1.1.1 什么是数据库 数据库的定义:保存有组织的数据的容器 数据库软件不是数据库,而是DBMS 1.1.2 表 表(Table)的定义:某种特定类型数据的结 ...
- C# 互通操作 （二）基础知识1
[DllImport("user32.dll", EntryPoint = "MessageBox")] public static extern int De ...
- 在html中使用javascript总结
对于初学者运行代码的第一步,首先是怎么把你所写的js代码与html代码之间关联起来,只有关联了,js才能控制html中的代码,进而达到控制页面的目的,我总结了html引用js的方法,一方面可以时时复习 ...
- 批处理-Java JDK环境变量配置
setx /M JAVA_HOME "C:\Program Files\Java\jdk1.8.0_131" setx /M CLASSPATH ".;%%JAVA_HO ...
- 适用于 iOS、Android 和 Windows 设备的移动设备管理
适用于 iOS.Android 和 Windows 设备的移动设备管理 随着企业环境中移动设备的数量不断增加,详细检查访问您企业资源的移动设备变得至关重要.统一终端管理软件 Desktop Centr ...
- Windows 自动化补丁管理
Windows 自动化补丁管理 Desktop Central,这一倍受欢迎的补丁管理软件旨在修补可能导致安全薄弱.破坏关键系统数据或导致系统不可用的漏洞.管理此类软件漏洞对网络管理员来说简直是噩梦. ...
- jieba库的使用和好看的词元
一.jieba库的使用与说明 1.jieba库基本介绍 jieba库是优秀的中文分词第三方库 -中文文本需要通过分词获得单个的词语 - jieba是优秀的中文分词第三方库,需要额外安装 ...