问：如果让你实现下图，点击跳转后，让内容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. BFC是什么及能用它能做什么

    最近较为频繁的碰到了一个新的名词:BFc,每次都可以在相关的技术博客里面看到对其的简单介绍,刚开始以为自己懂了,但实际上没懂,今天就来搞清楚它到底是什么,以及我们能用他做什么? BFC:全名为 Blo ...

  2. 数据库镜像转移Failover Partner

    数据库主体镜像转换:任务 - 镜像 - 故障转移 sqlserver2008 数据库镜像服务配置完成后,大家会发现我们有了两个数据库服务,这两个服务可以实现自动故障转移,那么我们的程序如何实现自动连接 ...

  3. JSP：getOutputStream() has already been called for this response

    JSP页面,用小脚本显示一张图片 <%@page import="java.io.OutputStream"%> <%@page import="jav ...

  4. springmvc 简单使用

    一.配置(使用)流程 1.新建maven工程,在pom.xml中导入相关包,重要的是springmvc包,servlet包,jstl包 <dependencies>             ...

  5. vue 导航守卫，验证是否登录

    路由跳转前,可以用导航守卫判断是否登录,如果登录了就正常跳转,没有登录就把路由指向登录页面. router.beforeEach((to, from, next) => { const next ...

  6. dede网站安全要做的四件事

    1,把安装install的文件夹删除:2,关闭member系统,禁止member文件写入:3,把data文件外移到网站根目录之外:4,把included和plus目录的写入权限关闭. 转载自:http ...

  7. mysql 8 windows 下安装

    1.下载 mysql8 需要下载 window的 zip版本 2.解压 D:\software\mysql\mysql-8.0.16-winx64 2.在这个目录下创建一个 my.ini 的文件 [m ...

  8. boost--文件、目录操作

    filesystem库是文件系统操作库,可以使用其中的basic_path类用来操作目录.文件,使用需要包含编译好的system库和filesystem库,我们一般不直接使用basic_path,而是 ...

  9. javascript_01

  10. anemometer安装

    1.背景介绍:nginx:1.9.3 安装路径/data/nginxphp:5.5.27 安装路径 /data/phpmysql:5.7.18 安装路径/usr/local/mysql软件下载目录 / ...