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.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...
随机推荐
- Posche Piwis 3 Original and Clone – What’s the difference
Category : Car Diagnostic Tools What’s the difference between Porsche Tester Piwis III original and ...
- 包管理工具-yarn
今天知道了一个新的包管理工具叫yarn,总结如下: 如果你知道npm的使用过程,那么yarn你就觉着相见恨晚呐...... npm存在的问题: >安装的时候无法保证速度的一致性 >安全问题 ...
- Navicat Premium 出现2059错误解决办法
1,登陆后可查询默认加密规则,键入 use mysql; select user,plugin from user where user ='root'; 解决办法: 1,更新用户密码:ALTER U ...
- Context 解析
· ContextWrapper比较有意思,其在SDK中的说明为“Proxying implementation ofContext that simply delegates all of its ...
- 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式
最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...
- angularJs 2-quickstart学习记录
angular官网文档 我尝试文档中下载<快速起步>种子的方法进行quickstart. cd quickstart npm install npm start npm install 这 ...
- java 基本原则
开闭原则:当应用的需求改变时,在不修改软件实体的源代码或者二进制代码的前提下,可以扩展模块的功能,使其满足新的需求. 可以通过“抽象约束.封装变化”来实现开闭原则,即通过接口或者抽象类为软件实体定义一 ...
- xbee3的先进性功能用法
xbee3以及xbee3 PRO 是digi无线模块的又一大突破:不仅实现了所有2.4G的模块整合,更在以后的程序更新中会增加蓝牙功能:它打通了xbee系列1和系列2之间的壁垒:不同于xbee S2C ...
- php-fpm 配置中pm的选择
另附豆瓣技术贴:https://www.douban.com/note/315222037/ 1.php-fpm优化参数介绍他们分别是:pm.pm.max_children.pm.start_serv ...
- bootstrap table使用参考
https://www.cnblogs.com/landeanfen/p/5821192.html 转载 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...