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

原文地址:https://www.cnblogs.com/tu-0718/p/9492629.html

时间: 2024-11-08 23:23:50

CSS3新增伪类--好用的:target的相关文章

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

CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1)      id选择器(# myid) 2)      类选择器(.myclassname) 3)      标签选择器(div, h1, p) 4)      相邻选择器(h1 + p) 5)      子选择器(ul > li) 6)      后代选择器(li a) 7)      通配符选择器( * ) 8)      属性选择器

css3新增伪类

1.p:first-of-type            选择属于其父元素的首个 <p> 元素的每个 <p> 元素 2.p:first-child ,            匹配属于其父元素中的首个子元素(子元素:first-child) table tr:first-child{} 3.p:last-of-type             选择属于其父元素的最后 <p> 元素的每个 <p> 元素. 4.p:last-child              

CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素. p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素. p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素. p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素. p:nth-child(2)  选择属于其父元素的第二个子元素的每

css新增伪类

css3新增伪类 :first-of-type p:first-of-type 选择属于其父元素首 <p> 元素每 <p> 元素 :last-of-type p:last-of-type 选择属于其父元素 <p> 元素每 <p> 元素:only-of-type p:only-of-type 选择属于其父元素唯 <p> 元素每 <p> 元素:only-child p:only-child 选择属于其父元素唯元素每 <p> 元

css3中伪类选择器和伪元素介绍

利用html5和css3开发出炫酷的网页,那么对于一个web前端开发者,css3也是必须要掌握的,下面和大家讨论一下css3中伪类选择器和伪元素. 类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如:p.left{text-align: left}p.rigth{text-align: right} 伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 最常见的伪类选择器 a:link{ color:

CSS3 结构性伪类选择器(2)

CSS3 结构性伪类选择器-first-child ":first-child"选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 通过":first-child"选择器定位列表中的第一个列表项,并将序列号颜色变为红色. HTML代码: <ol> <li><a href="##">Link1</a></li>

Atitit.隔行换色 &#160;变色 css3 结构性伪类选择器

Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原理就是利用结构伪类选择器 .list_div tr:nth-of-type(odd){background:#fff;} /* 奇数行 */ /*-------------------------------*/ .list_div tr:nth-of-type(even){ background:

CSS3 结构伪类选择器 详解

1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型.否则无效 p:nth-child(1){color:red} <div> <p>这是红色的<p> </div> <div> <h1>这是第一个子元素 但不是P类型,不是红色</h1> < p>这是黑色的 注意对比

CSS3特殊伪类::selection改变页面选中文字的样式

一般在网页上面,选中文字的时候,文字的样式是会改变的,当然,样式也都是千篇一律的浏览器的默认样式,蓝底白字,偶然看到有些网页上面当文字选中的时候会有不一样的样式,当时就很是好奇,后来才慢慢发现是css的一个伪类::selection ::selection是一个CSS3选择器(这也告诉这我们CSS3必须要去熟悉,这玩意确实可以弄出很多意想不到的好效果.) 兼容性:IE9+,Chrome,Opera,Safari,Firefox…(也可以去查看)caniuse.com#search=::selec