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.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...
随机推荐
- .Net 配置的简陋解决方案
公司是做CS产品的, 最近分配给我一个活, 要求: 1. 公司程序启动时, 检测是否有配置文件, 没有的话则按默认值创建一个 2. 配置文件要加密, 不能让客户随便看到里面的参数 ...
- c#跨线程访问的代码和窗体关闭退出死循环的代码
一:一段跨线程访问,给页面内的控件赋值的代码找了半天没找到,还得找了以前写的程序. 在这记下来吧 . 这是其他程序内可以跨线程访问的代码 . if (gridControl1.InvokeRequi ...
- visual studio vode 汉化
在vs code 的商店中搜索Chinese,找到如下模块,安装. 安装后,按下ctrl+shift+p,找到configure display language ,点击进入,修改 改成如图字母就可以 ...
- CSS网页布局
注:优化样式表:增加css样式表的可读性 减伤样式重复 一.主要内容 1.布局分类;131 121 2.display属性排版 3.float属性排版(横向多列布局) 4.防止父类盒子塌陷 二.标 ...
- [JavaScript] 弹出编辑框
效果:单击图片copy,双击图片或者点Edit都会打开编辑窗口 Style <style> .black_overlay{ display: none; position: absolut ...
- select标签操作
//遍历select标签 WebElement select = driver.findElement(By.tagName("select")); List<WebElem ...
- 一些Debug时没整理的内容
一.UShapeComponent组件的默认CollisionProfile为:OverlapAllDynamic.这会影响到由此派生的许多组件. 二.TwinStickShooter中绑定键盘的方式 ...
- [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.2:compile (default-compile) on project taotao-manager-pojo: Compilation failure
运行maven项目时报错 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.2:compi ...
- LAPM 相关实验01
目录 lab1 静态.动态资源的区别lab2 部署phpMyadminlab3 部署wordpresslab4 编译安装php-Xcache加速器lab5 fcgi实现lamp lab1 静态.动态资 ...
- 代码图片转文本--阿里VS度娘
最近看vue的书,居然没有提供源代码,一堆的CSS真不想手工录入,于是用手机找APP去转.发现广告普遍,于是找找网上相关的API,结果百度和阿里都有在线的API提供,于是好奇其能力如何.如于用以下两图 ...