问：如果让你实现下图，点击跳转后，让内容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. break 和continue在循环中起到的作用

    break语句的作用是终止当前循环,跳出循环体.主意,break只能跳出一层循环. continue语句的作用是终止本轮循环并开始下一轮循环,(这里要主意的是在开始下一轮循环之前,会先测试循环条件). ...

  2. Tigase-01 使用spark或spi登录Tigase服务器

    喜欢研究IM技术的同学们,欢迎加入群 310790965 一起来学习,有什么问题可以一起讨论. 本源码是基于tigase v7.1.0来分析的,群里文件中会上传一个完整能跑的源代码压缩包,网上tiga ...

  3. 感觉还是要学点c才牛逼

    2019-04-06 $gcc -o hello hello.c  //-o选项用来指定输出文件的文件名. gcc *.c -o hello  //使用通配符编译当前目录下的所有c文件 $ gcc - ...

  4. hbase_基本命令

    hbase 区分大小写. 1) create '表名','列族名'  --多个列族名用逗号分隔 2)  list  desc(查询表名详细信息) 3)  put '表名','行健','列族:列名',' ...

  5. 博客1--tensorflow的图像基本处理操作

    话不多,具体内容在开源中国里我的博客:https://my.oschina.net/u/3770644 代码: #!/usr/bin/env python# -*- coding:utf-8 -*-# ...

  6. C#下载Url文件到本地

    protected void Page_Load(object sender, EventArgs e) { string filePath = Request.Params["FilePa ...

  7. Vmware Workstation - linux系统下 VmTools 安装

    程序版本 : VMware® Workstation 14 Pro 系统环境 : win10 64位下 ubuntu-14.04.5-desktop-amd64 问题:在运行linux系统过程中,de ...

  8. C# WPF 父控件通过使用可视化树找到子控件

    在我们使用WPF设计前台界面时,经常会重写数据模板,或者把控件放到数据模板里.但是一旦将控件放到数据模板中,在后台就没有办法通过控件的名字来获取它了,更没办法对它进行操作(例如,隐藏,改变控件的某个值 ...

  9. 《Miracle_House》团队项目系统设计改进

    一.团队项目系统设计改进: 1.分析项目系统设计说明书初稿的不足,特别是软件系统结构模型建模不完善内容: 对于原文档中,设计图中存在的错误以及文字描述不准确的地方进行了修改. 2. 团队项目Githu ...

  10. 转存下链接--- Java awt Swing 进行拖拽实现布局

    http://blog.csdn.net/vpingchangxin/article/details/8673825 swing开发图形界面工具,eclipse swing图形化操作界面工具配置