`

CSS3特性:CSS3 target伪类

 
阅读更多

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

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

浏览器支持

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

如何使用:target

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

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

 实例

让我们通过一个简单的例子来演示。比如我们在页面中常常会用到tab,之前我们要用脚本来实现,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代码:

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

分享到:
评论

相关推荐

    CSS3 target伪类简介

    ### CSS3 `:target` 伪类详解 #### 一、引言 随着Web技术的不断进步和发展,CSS3...通过上述资料的学习,开发者可以更深入地了解`:target`伪类的工作原理及其应用场景,从而在实际项目中灵活运用这一强大的CSS3特性。

    CSS3参考手册(css3语法使用查询手册)CHM版.rar

    CSS3参考手册(css3语法使用查询手册)CHM版,可快速索引和搜索CSS3各种属性值以及具体的用法,说详细介绍有CSS3选择器的各方面知识,这包括UI元素状态伪类 E:checked、结构性伪类 E:nth-of-type(n)、子串匹配的属性...

    HTML5&CSS3网页制作:结构化伪类选择器.pptx

    HTML5和CSS3是现代网页制作的核心技术,其中CSS3的结构化伪类选择器是增强网页样式控制的重要工具。这些选择器允许开发者更精确地定位和应用样式,提高页面设计的灵活性和可维护性。 首先,`:root`选择器用于选取...

    纯css3实现的tab标签切换效果

    总结来说,纯CSS3实现的Tab标签切换效果利用了CSS3的新特性,如选择器、Flexbox布局、过渡和伪类,为用户提供了一种直观且交互性强的界面体验。通过掌握这些技巧,开发者可以在不依赖JavaScript的情况下创建出响应式...

    CSS前端示例:看似需要 JavaScript 实现的效果,其实仅用到了 CSS 的示例集合

    2. **伪类与伪元素**:CSS的伪类如`:hover`、`:active`、`:focus`、`:target`等,以及伪元素如`::before`、`::after`,可以实现鼠标悬停、元素激活、获取焦点或被链接时的特殊效果,无需JavaScript干预。 3. **CSS ...

    CSS3新特性和CSS3教程

    CSS3是 Cascading Style Sheets(层叠样式表)的最新版本,它引入了许多新的特性和功能,极大地扩展了网页设计的可能性。相比于CSS2,CSS3不仅提供了更精细的样式控制,还引入了模块化的发展方式,使得开发者可以...

    css3实现的tab标签切换效果

    这里可以利用CSS3的`:target`伪类,当链接的`href`与元素ID匹配时,该元素将被激活。例如: ```css .tab-content { display: none; padding: 20px; } /* 使用 :target 伪类显示对应的tab内容 */ #tab1:target, #...

    HTML5+CSS3网站设计基础教程 源代码.7z

    1. **选择器扩展**:增加了伪类(如:hover、:active、:target)和伪元素(如::before、::after),以及更复杂的组合选择器,让样式定位更精确。 2. **边框和背景**:圆角边框(border-radius)、阴影效果(box-...

    纯CSS3实现的tab标签

    纯CSS3实现的Tab标签不仅减轻了JavaScript的负担,还允许开发者利用CSS3的新特性来创建更加美观、交互性强的界面。在这个案例中,我们将探讨如何仅使用CSS3来创建自适应高度的Tab标签,以及涉及的关键技术和注意事项...

    纯css3手写轮播

    总结来说,"纯css3手写轮播"项目展示了如何仅使用CSS3来创建基本的轮播效果,利用了`transform`、`transition`和伪类选择器等特性。但由于CSS3自身不支持定时器,所以无法同时实现自动轮播和焦点切换。这提醒我们在...

    CSS3 多种TAB选项卡效果

    在理解CSS3选项卡效果之前,首先需要了解CSS3的一些关键特性,如选择器增强、伪类和伪元素、边框和背景、过渡(transition)、动画(animation)以及 Flexbox 和 Grid 布局等。 1. 选择器增强:CSS3引入了更复杂的...

    gulp-css-target:Gulp插件,用于将单个CSS文件拆分为多个CSS文件

    gulp-css-target 将CSS文件细分为多个目标,以实现更好的目标定位和更好的性能。 有关工作示例,请参见test目录。安装npm install --save-dev gulp-css-target用法在CSS中/** * Target**/. target { _test : "@...

    自己的html5 css3练习(新手)

    1. **选择器增强**:新增伪类(如:hover、:active、:target)和伪元素(如::before、::after),以及属性选择器,使样式选择更精准。 2. **多列布局**:通过column-count、column-gap等属性实现报纸般的多列布局。 3...

    纯CSS3实现TAB选项卡切换.zip

    在纯CSS3的选项卡切换中,我们可以利用`:hover`、`:active`和`:target`等伪类来控制不同状态下的元素显示。`:hover`当鼠标悬停时触发,`:active`在元素被点击并保持活动状态时触发,`:target`则对应URL锚点指向的...

    网页样式css3

    CSS3扩展了选择器的功能,引入了更强大的选择器,如类选择器、ID选择器、属性选择器和伪类选择器等。例如,`:nth-child()`和`:nth-of-type()`允许你基于元素在父元素中的位置来选择元素,`[:target]`可以选取URL锚点...

    html5+css3课件打包

    1. 选择器增强:如nth-child()、nth-of-type()、target伪类等,使得更精确地选择元素成为可能。 2. 盒模型改进:包括盒阴影(box-shadow)、圆角(border-radius)、边框图片(border-image)等,增强了视觉效果。 3. 多列...

    CSS3.rar_CSS3_css chm_css3 chm pudn

    1. **伪类和伪元素**:CSS3增加了许多新的伪类,如`:hover`、`:active`、`:focus`、`:target`等,用于响应用户交互;伪元素如`::before`和`::after`允许在元素前后插入内容。 2. **多列布局**:`column-count`、`...

    CSS3最全手册

    虽然CSS3引入了许多新特性,但实际应用中需要考虑不同浏览器的兼容性,确保在各个浏览器中都能正确显示。 综上所述,CSS3为网页设计提供了前所未有的灵活性和表现力,从简单的样式控制到复杂的布局设计,都展现出了...

    CSS3课件.docx

    3. **目标伪类选择器**:`:target`选择器用于选取当前激活的目标元素,即URL中的锚点所指向的元素。 4. **伪元素选择器**:如`::before`和`::after`,可以在元素内容前面或后面插入内容,常用于创建装饰性元素或...

    css全攻略.rar

    2. CSS选择器:包括元素选择器(如`div`)、类选择器(如`.class`)、ID选择器(如`#id`)、属性选择器(如`[target]`)等,以及更复杂的组合选择器、伪类和伪元素选择器(如`:hover`, `::before`)。 3. CSS盒模型...

Global site tag (gtag.js) - Google Analytics