问：如果让你实现下图，点击跳转后，让内容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的更多相关文章

  1. CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性

    CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1)      id选择器(# myid) ...

  2. CSS3新增伪类汇总

    :root 选择文档的根元素,等同于 html 元素 :empty 选择没有子元素的元素 :target 选取当前活动的目标元素 :not(selector) 选择除 selector 元素意外的元素 ...

  3. CSS3新增伪类

    p:last-of-type         选择其父元素的最后的一个P元素 p:last-child            选择其父元素的最后子元素(一定是P才行) p:first-of-type ...

  4. CSS3新增伪类有那些？

    p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child ...

  5. CSS3 结构性伪类选择器（1）

    1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元 ...

  6. CSS3 结构伪类选择器 详解

    1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...

  7. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

  8. CSS3 :nth-child()伪类选择器

    CSS3 :nth-child()伪类选择器 CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好 的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标 准已提出数年 ...

  9. CSS3 结构性伪类选择器（2）

    CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...

随机推荐

  1. php实现仿百度分页

    本文主要和大家分享php实现仿百度分页的实例,先来看一下效果图. 基本策略 1, 首先要查询总记录数 2, 设置每页显示的数量并计算总页数 3, 增加一个get传值num代表当前访问的是哪一页,如果没 ...

  2. 教程：使用cPanel管理域名和数据库

    cPanel是一个基于web的基于web的控制面板,它简化了许多常见的系统管理任务,如网站创建.数据库部署和管理等.本指南向您展示了如何使用cPanel用户帐户管理域和数据库.所有这些指令都与位于端口 ...

  3. SELinux入门简介

    操作系统有两类访问控制:自主访问控制(DAC)和强制访问控制(MAC).标准Linux安全是一种DAC,SELinux为Linux增加了一个灵活的和可配置的的MAC. 进程启动时所拥有的权限就是运行此 ...

  4. java学习（一）

    目录 java简介 java基础 基本语法 java标识符 java变量 变量类型 变量声明 java常量 Java 基本数据类型 内置数据类型 引用数据类型 Java类型转换 java注释 操作符 ...

  5. spring.boot 无法加载oracle驱动的可能原因

    .找到本地oracle安装目录下的ojdbc6.jar包,为了方便起见,复制到某盘的根目录(如F盘根目录),在cmd下进入F盘根目录(也就是ojdbc.jar复制的目录),同时我们需要查看ojdbc的 ...

  6. linux性能监控(转)

    vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.这个命令是我查看Linux/Unix最 ...

  7. TwinStickShooter的一些问题

    TwinStickShooter模板应该是比较好的了解UE基本Pawn和Projectile的一个C++例子.以下是一些问题. 一.这个模板以纯C++编写,没有蓝图,所以第一步,我想测试下如何引用蓝图 ...

  8. HDU-4763 Theme Section KMP

    题意:求最长的子串E,使母串满足EAEBE的形式,A.B可以任意,并且不能重叠. 题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=4763 思 ...

  9. CCS中cmd文件的编写

    http://blog.sina.com.cn/s/blog_abe5740601015b3q.html CMD的专业名称叫链接器配置文件,是存放链接器的配置信息的,我们简称为命令文件,其中比较关键的 ...

  10. centos7下安装mysql会遇到的问题集合

    1.mysqld_safe提示 command not found 解决方法 https://blog.csdn.net/lampqiu/article/details/79138961 2.Mysq ...