问：如果让你实现下图，点击跳转后，让内容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. nginx学习笔记(一)

    agentzh 的 Nginx 教程 学习笔记 nginx的变量 Nginx 变量一旦创建,其变量名的可见范围就是整个 Nginx 配置,甚至可以跨越不同虚拟主机的 server 配置块, 例子如下 ...

  2. iserver频繁崩溃、内存溢出事故解决小记

    一.事故分析 在生产项目中,频繁遇到iserver隔一段时间就会出现崩溃的情况. 将iserver错误日志发给技术客服后,说是内存溢出的问题. 查看服务器的配置是32g内存,按理说不该出现此类问题. ...

  3. ASCII，Unicode 和 UTF-8

    ASCII: 英文的编码方式,规定了128个字符的编码,使用了一个字节的后七位表示. Unicode : 每个国家的字符集都不同,世界上所有的字符远远超过128个.Unicode,就是一种所有符号的编 ...

  4. Idea搭建SpringMVC框架（初次接触）

    公司转Java开发,做的第一个项目是SpringMVC框架,因为底层是同事封装,等完成整个项目,对SpringMVC框架的搭建还不是很了解,所以抽时间不忙的时候自己搭建了一个SpringMVC框架. ...

  5. shell脚本学习-练习写一个脚本2

    # 1.依次展示/var目录下的对象,并说明是文件或者目录.格式如:Hello,$file. # 2.统计一个有多少个文件. #!/bin/bash #Program Description: #Au ...

  6. mysql 统计某个月每天的数据

    select SUM(order_money) as money,substr(t.pay_time,1,10) as time  from pay_log t where  t.pay_time l ...

  7. CentOS7配置阿里云源

    cd /etc/yum.repos.d/ mkdir backup mv CentOS-* backup/ wget -O /etc/yum.repos.d/CentOS-Base.repo http ...

  8. Aes加解密,php

    Aes类库 <?php namespace Aes; class Aes { /** * var string $method 加解密方法,可通过openssl_get_cipher_metho ...

  9. Exp8 Web基础 20154320 李超

    1.实验后回答问题 (1)什么是表单. 表单是一个包含表单元素的区域,表单元素是允许用户在表单中输入信息的元素,表单在网页中主要负责数据采集功能,一个表单有三个基本组成部分:表单标签.表单域.表单按钮 ...

  10. pyspider爬取tourism management 所有文章的标题 作者 摘要 关键词等等所有你想要的信息

    #!/usr/bin/env python # -*- encoding: utf-8 -*- # vim: set et sw=4 ts=4 sts=4 ff=unix fenc=utf8: # C ...