文档章节

关于css3的:target伪类选择器

sunshinewyf
 sunshinewyf
发布于 2015/10/13 20:16
字数 247
阅读 312
收藏 1



初识这个css3属性的时候,就想到了html中的锚点特效,也是只要在href的属性附上某节点元素的id号即可,好吧,现在来具体说说这个属性的一些特点:
目标伪类选择器:target是众多使用的css3特效中的一个,用来匹配文档(页面)中的URI中的某个标识符的目标元素.这样说好像有点抽象了哈,那就直接上例呗:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>target demo</title>
    <style type="text/css">
                      div:target{
                          background: purple;border: 1px solid black;
                      }
    </style>
</head>
<body>
    <ul>
        <li><a href="#tab1">tab1</a></li>
        <li><a href="#tab2">tab2</a></li>
        <li><a href="#tab3">tab3</a></li>
        <li><a href="#tab4">tab4</a></li>
    </ul>
             <div id="tab1">this is tab1</div>
             <div id="tab2">this is tab2</div>
             <div id="tab3">this is tab3</div>
             <div id="tab4">this is tab4</div>
</body>
</html>

这个效果还是蛮好用的,兼容性的话,支持IE9+和其他现代所有浏览器

© 著作权归作者所有

sunshinewyf
粉丝 17
博文 97
码字总数 64205
作品 0
武汉
程序员
私信 提问
css伪类选择器

我们在写css的时候会经常使用伪类选择器,伪类选择器就是通过css选择器加上冒号和伪类名构成的。可能有些伪类选择器你已经见过了,比如说a:hover这样的选择器。 在大多情况下,伪类选择器是非...

省委书记沙瑞金
2016/11/08
118
0
CSS3 基础(1)——选择器详解

本文转载于:猿2048网站CSS3 基础(1)——选择器详解 CSS3选择器详解 一、 属性选择器   在CSS3中,追加了三个属性选择器分别为:[att*=val]、[att^=val]和[att$=val],使得属性选择器有了通...

前端老手
09/06
19
0
好程序员web前端分享Css3的概念和优势

好程序员web前端分享Css3的概念和优势,CSS3是css技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新...

好程序员IT
05/06
6
0
神通广大的CSS3选择器

作者:大额_skylar http://www.cnblogs.com/skylar/p/css3-selector.html 每个前端工程师可能每天都会写一些css,其中选择器是很主要的一部分。但是,大家可能每天写的大多是#id,.class这样的...

数通畅联
2016/02/23
28
0
jQuery--选择器

jQuery--选择器 一、JavaScript中选择元素 • document.getElementById() • document.getElementsByName() • document.getElementsByTagName() • document.getElementsByClassName() • ......

JS_HCX
2018/01/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

设计模式之访问者模式

定义 Represent an operation to be performed on the elements of an object structure. Visitor lets you define a new operation without changing the classes of the elements on which......

陈年之后是青葱
昨天
10
0
PhotoShop 高级应用 : 分层云彩 - 简单闪电效果

1.创建黑白渐水平渐变图层 2.选择滤镜选项卡: 渲染--->分层云彩功能 3.将滤镜-云彩效果渲染后的图层进行反相操作 【此时出现闪电效果】 6.调整色阶,使得闪电效果更明显 7.创建剪贴蒙版:色...

东方墨天
昨天
11
0
三种实现Android主界面Tab的方式

三种实现Android主界面Tab的方式 https://www.cnblogs.com/caobotao/p/5103673.html

shzwork
昨天
11
0
java8-Optional类

背景 NPE问题,100%的Java程序员都碰到,并且曾经是心中的痛。 1965年英国TonyHoare引入了Null引用,后续的设计语言包括Java都保持了这种设计。 一个例子 业务模型 Person 有车一族, 有Car...

春天springcarter
昨天
11
0
py 登录github时token以及cookie的应用

import requestsfrom bs4 import BeautifulSoup## 获取tokenr1 = requests.get('https://github.com/login')s1 = BeautifulSoup(r1.text,'html.parser')token = s1.find(name='input',......

子枫Eric
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部