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.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...
随机推荐
- 1.为什么使用spring boot
最近2年spring cloud微服务比较流行,Spring Cloud基于SpringBoot,为微服务体系开发中的架构问题提供了一整套的解决方案, 本文总结一下为什么要使用Spring boot, ...
- java redispool测试类保存
这两天睡眠不足,今晚吃完饭,肚子烦躁的很,迟迟进入不了代码的状态,强打精神,又赶上处理了几个编辑器的报错,等到真正面对问题的时候又是晚上十一点, 晚上十一点是幸运点,到这个点无关问题都能解决完毕进入调 ...
- nsq 初试
nsqlookupd tcp 4160 http 4161nsqd 4150nsqadmin 4171 1:安装$ brew install nsq1) 停止nsq默认的启动$ brew servic ...
- nodeJS接入微信公众平台开发
一.写在前面的话 Node.js是一个开放源代码.跨平台的JavaScript语言运行环境,采用Google开发的V8运行代码,使用事件驱动.非阻塞和异步输入输出模型等技术来提高性能,可优化应用程 ...
- Mysql数据库每天定时执行备份方法
此数据库备份方法是简单的数据库备份方法,就是从Mysql的数据文件下,将数据库文件拷贝到指定的文件夹目录下 1.创建txt文件,添加脚本 net stop mysql xcopy D:\MySql\D ...
- JS-MD5加密
首先,下载MD5文件压缩包 点击下载MD5压缩包 然后,在需要加密的页面引用MD5脚本文件 <script src="js/md5.js" type="text/j ...
- Win7 VS2017编译Godot3.0.2和2.1.4
千呼万唤屎出来,Godot终于发布3.0版本的源码了,今天是2018年3月17日,自去年接触过后,一直没事就刷刷Gayhub,看看3.0什么时候更新,刷了一年也没结果. 今天上Youtube无意中搜了 ...
- HDU 4609 3-idiots (组合数学 + FFT)
题意:给定 n 条边,问随机选出 3 条边,能组成三角形的概率是多少. 析:答案很明显就是 能组成三角形的种数 / (C(n, 3)).现在的问题是怎么求能组成三角形的种数. 这个博客说的非常清楚了 ...
- Blueking bk 蓝鲸开发环境搭建
首先根据文档安装各种东西 http://docs.bk.tencent.com/develop_center/ops/unified.html#installation 完后在在vagrantfile ...
- REdis主挂掉后复制节点才起来会如何？
结论: 这种情况下复制节点(即从节点)无法提升为主节点,复制节点会一直尝试和主节点建立连接,直接成功.主节点恢复后,复制节点仍然保持为复制节点,并不会成为主节点. 复制节点无法提升为主节点的原因是复制 ...