当前位置: 首页 > 编程日记 > 正文

记录CSS3 target伪类简介

CSS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如#respond,target就是用来匹配ID为respond的元素的。

现在在页面中,点击一个ID链接后,页面只会跳转到相应的位置,但是并不会有比较明显的UI标识,使用:target伪类可以像:hover等伪类一样对目标元素定义样式。

浏览器支持

因为我们在讨论CSS3,所以它现在被除了IE6-8以外的所有浏览器支持,但是IE9会支持IC交易网这个伪类。这是相当遗憾的,但是这个现实并不影响你使用它。

如何使用:target

:target伪类和:hover、:link、:visited、:focus等伪类的用法是一样的:

 selector:target{
color:red;
/*other styles*/
}

实例

让我们通过一个简单的例子来演示。比如我们在页面中常常会用到tab,之前我们要用脚本来实现IC交易网,YUI、jQuery也都有这样的插件或者模块,但是现在我们用:target伪类就可以实现。

HTML结构:

 <ul class="tabs">
 <li><a href="#tab1">标签一</a></li>
 <li><a href="#tab2">标签二</a></li>
 <li><a href="#tab3">标签三</a></li>
</ul>
<div id="tab1" class="tab_content">
<!--tabed content--></div>
<div id="tab2" class="tab_content">
<!--tabed content--></div>
<div id="tab3" class="tab_content">
<!--tabed content--></div>

CSS3代码:

 /*layout styles*/
.tab_content {
 position: absolute;/*set content box as absolute*/
 /*other layout styles*/
}
#tab1:target, #tab2:target, #tab3:target {
 z-index: 1;
}

原理想必大家都看懂了,就是将tab内容框设置为绝对定位,然后通过:target伪类调整其z-index。

这里是个demo页面。

具体用法就是这么简单,在实际项目中大家就可以随意发挥了 :)

转载于:https://www.cnblogs.com/codeaspnet/archive/2011/06/30/2095017.html

相关文章:

LeetCode实战:合并两个有序数组

题目英文 Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note: The number of elements initialized in nums1 and nums2 are m and n respectively.You may assume that nums1 has enough space (size that is greater o…

Java云托管服务的开支削减策略

\摘要\随着项目不断扩大&#xff0c;你需要将其迁移到更大的虚拟机上。但如果新虚拟机环境超出了你的需求则会产生额外开支。\相比虚拟机&#xff0c;容器具有更小的粒度&#xff0c;并且无需重启运行中的实例即可垂直扩展。\单体应用和历史遗留应用无需更改配置&#xff0c;即…

SpringBoot培训教程--史前文明之Spring简介

一. Spring之起源 1.你知道J2EE吗? 要说到Spring的历史起源&#xff0c;首先咱们要说说J2EE这个玩意儿。 J2EE在1999年和2000年的时候开始得到广泛实现&#xff0c;在J2EE中提出了”事务管理“等核心中间层标准化的概念&#xff0c;但是在实践中出现了各种问题&#xff0c;尤其…

利用外部命令Oralce数据库导入导出

1--数据库导出(exp) 首先进入命令行 导出数据库 在命令行中输入如下命令: exp c2j/c2jc2j filec:/table.dmp tablesjbitaku,jbitakum grantsy 然后按回车键 说明: c2j/c2jc2j 分别表示用户名&#xff0c;密码和服务名 file&#xff1a;输出文件的位置和文…

LeetCode实战:子集

题目英文 Given a set of distinct integers, nums, return all possible subsets (the power set). Note: The solution set must not contain duplicate subsets. Example: Input: nums [1,2,3] Output: [[3],[1],[2],[1,2,3],[1,3],[2,3],[1,2],[] ]题目中文 给定一组…

linux的挂载命令

在linux中所有的存储设备都必须挂载后才能使用&#xff0c;相当于windows的分配盘符 挂载命令 mount #查看系统中已经挂载好的设备 mount -a #根据/etc/fstab中的内容&#xff0c;自动挂载 /etc/fstab是系统开机的自动挂载文件 系统挂载时要自动检车测这个文件&#xff0c;如果…

软件测试需要学习什么技术

软件测试在近几年被很多企业都重视起来&#xff0c;互联网时代&#xff0c;APP种类越来越多&#xff0c;软件测试这一行业的发展前景是非常大的&#xff0c;那么想要学习软件测试需要学习什么技术呢?来看看下面的详细介绍。 软件测试需要学习什么技术? 每个软件在上线之前都离…

silverlight4.0 写文件不能设置默认文件名

Silverlight4.0 不提供SaveFileDialog的SafeFileName的写属性 Weve not exposed the "DefaultFileName" property on SaveFileDialog due to time constraints.Moe Elshall | Silverlight Development TeamMicrosoft Corporation等待5.0解决问题。转载于:https://www…

我是如何组织“算法刻意练习活动”的?

背景 在上个学期末&#xff0c;我们组织了一次团队的招新活动 – 如何加入 LSGO 软件技术团队&#xff1f;。 我们让预加入团队的同学在假期中完成以下两个任务之一&#xff1a; 学习 C# 语言&#xff1a; https://www.bilibili.com/video/av2357992/?p1学习 Python 语言&a…

[Ubuntu] ubuntu10.04系统维护之Wine的安装

在介绍安装wine之前&#xff0c;我想是有必要先介绍一下Wine的。当然&#xff0c;如果是Liunx的高手&#xff0c;我想是没必要看的&#xff0c;但是对于笔者这样的菜鸟级人物还是需要看一下的。 Wine是一款Liunx下的模拟器软件&#xff0c;但是Wine又不仅仅是一个模拟器软件&am…

Python培训教程:Python内置数据结构之双向队列

经常听说Python就是一门执行速度低的语言&#xff0c;可能是你的程序中使用了复杂的算法与数据结构&#xff0c;才会导致程序执行速率低的。在Python的标准库中提供了常见的数据结构工开发者使用&#xff0c;不仅执行速率比较快&#xff0c;还可以简化开发者的编程工作。下面我…

华为hybrid-vlan

华为hybrid-vlan、三层交换、DHCP拓扑&#xff1a;需求&#xff1a;1.路由器终结vlan2.交换机间以hybrid方式透传vlan3.PC以DHCP获取IP思路&#xff1a;1.PC的网关在路由器上2.配置hybrid-vlan3.配置DHCP步骤&#xff1a;路由器AR1&#xff1a;<Huawei>sy[Huawei]vlan 10…

android 按住拖动gallery防止马上加载数据导致gallery卡的方法

gallery菜单滑动有一个不好的效果就是每次经过中间的菜单都默认是被选中状态&#xff0c;同时会加载数据 以至于切换不流畅&#xff0c;有一种卡卡的感觉&#xff01;&#xff01;其实用线程来处理这个问题&#xff0c;一定的时间后如果选择的index值不变&#xff0c;说明已经稳…

LeetCode实战:买卖股票的最佳时机

背景 为什么你要加入一个技术团队&#xff1f;如何加入 LSGO 软件技术团队&#xff1f;我是如何组织“算法刻意练习活动”的&#xff1f;为什么要求团队的学生们写技术Blog 题目英文 Say you have an array for which the ith element is the price of a given stock on day …

HTML5培训教程:HTML5基础介绍

HTML5发展史&#xff1a; HTML5草案的前身名为 Web Applications 1.0&#xff0c;于2004年被WHATWG提出&#xff0c;于2007年被W3C接纳&#xff0c;并成立了新的 HTML 工作团队。 • HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而&#xff0c;大部…

LeetCode实战:买卖股票的最佳时机 II

背景 为什么你要加入一个技术团队&#xff1f;如何加入 LSGO 软件技术团队&#xff1f;我是如何组织“算法刻意练习活动”的&#xff1f;为什么要求团队的学生们写技术Blog 题目英文 Say you have an array for which the ith element is the price of a given stock on day …

csdn模拟登陆

版权声明&#xff1a;原创作品&#xff0c;允许转载&#xff0c;转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/mayongzhan - 马永占,myz,mayongzhan 首先声明本模拟不稳定,有时会出现登陆不进去.模拟的原理请参考bl…

Xcode 创建.a和framework静态库(转)

最近因为项目中的聊天SDK&#xff0c;需要封装成静态库&#xff0c;所以实践了一下创建静态库的步骤&#xff0c;做下记录。 库介绍 库从本质上来说是一种可执行代码的二进制格式&#xff0c;可以被载入内存中执行。库分静态库和动态库两种。iOS中的静态库有 .a 和 .framework两…

软件测试培训需要学习什么

软件测试在近几年引起了很多人的关注&#xff0c;不少人都想要学习软件测试&#xff0c;零基础的学员都会选择报软件测试培训机构学习&#xff0c;那么软件测试需要学习什么呢?来看看下面的详细介绍。 软件测试培训需要学习什么? 软件测试需要学测试环境(网络环境&#xff0c…

IL,Emit之OpCodes说明(备查)

名称说明Add将两个值相加并将结果推送到计算堆栈上。Add_Ovf将两个整数相加&#xff0c;执行溢出检查&#xff0c;并且将结果推送到计算堆栈上。Add_Ovf_Un将两个无符号整数值相加&#xff0c;执行溢出检查&#xff0c;并且将结果推送到计算堆栈上。And计算两个值的按位“与”并…

LeetCode实战:只出现一次的数字

背景 为什么你要加入一个技术团队&#xff1f;如何加入 LSGO 软件技术团队&#xff1f;我是如何组织“算法刻意练习活动”的&#xff1f;为什么要求团队的学生们写技术Blog 题目英文 Given a non-empty array of integers, every element appears twice except for one. Find…

610D - Vika and Segments(线段树+扫描线+离散化)

扫描线&#xff1a;http://www.cnblogs.com/scau20110726/archive/2013/04/12/3016765.html 看图&#xff0c;图中的数字是横坐标离散后对应的下标&#xff0c;计算时左端点不变&#xff0c;右端点加1&#xff0c;所以总的更新的区间是l到r-1。 也可以理解为1代表的是&#xff…

UI设计比较流行的插画类型和运用

在当代平面设计中&#xff0c;插画是颇为经常使用的展现性元素&#xff0c;是视觉转达的紧张对象。插画在设计作品中&#xff0c;每每用来指导、开导和出现消息&#xff0c;更有针对性地、视觉化地同用户举行交换。真正高效的插画必然是有针对性的&#xff0c;易于辨认的&#…

poj 2362 Square

#include <iostream> //参照poj 1011 sticks#include <algorithm>using namespace std;int sticks[20],visited[20];int flag,total;int t,seg;int cmp(const void* a,const void* b){return (*(const int*)b)-(*(const int *)a);}void solve(int k,int…

Java BIO、NIO、AIO

同步与异步 同步与异步的概念, 关注的是 消息通信机制 同步是指发出一个请求, 在没有得到结果之前该请求就不返回结果, 请求返回时, 也就得到结果了.比如洗衣服, 把衣服放在洗衣机里, 没有洗好之前我们一直看着, 直到洗好了才拿出来晾晒. 异步是指发出一个请求后, 立刻得到了回…

LeetCode实战:数组中的第K个最大元素

背景 为什么你要加入一个技术团队&#xff1f;如何加入 LSGO 软件技术团队&#xff1f;我是如何组织“算法刻意练习活动”的&#xff1f;为什么要求团队的学生们写技术Blog 题目英文 Find the kth largest element in an unsorted array. Note that it is the kth largest el…

热修复测试过程注意事项

软件测试行是近几年比较火热的技术岗位&#xff0c;想要学习软件测试的同学有很多&#xff0c;今天小编给你分析一下关于热修复测试过程注意事项的相关内容&#xff0c;如果你在一次测试中脱颖而出那将来的你一定很精彩! 基于tinker实际测试过程中遇到的问题&#xff0c;小编简…

LeetCode实战:存在重复元素

背景 为什么你要加入一个技术团队&#xff1f;如何加入 LSGO 软件技术团队&#xff1f;我是如何组织“算法刻意练习活动”的&#xff1f;为什么要求团队的学生们写技术Blog 题目英文 Given an array of integers, find if the array contains any duplicates. Your function…

oracle exec 和 call 区别

转自&#xff1a;http://helloaq.iteye.com/blog/221614 exec 和 call 执行一个procedure时&#xff0c; exec是sqlplus的命令&#xff0c;只能在sqlplus中使用。 call是sql命令&#xff0c;任何工具都可以使用转载于:https://www.cnblogs.com/zerocc/archive/2011/07/27/21189…

html简单响应式滚动条置顶

简单响应式滚动条置顶 一般的&#xff0c;让页面出现滚动条的常见方法有&#xff1a; overflow:auto||overflow:scroll 或者overflow-x水平滚动条和overflow-y垂直滚动条那么现在要实现这样的一个效果&#xff1a; 直接在body中给一个header&#xff0c;后面一个Group盒子&…