`
zhangyaochun
  • 浏览: 2620967 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

css3之:target伪类

    博客分类:
  • css3
阅读更多

CSS3 target伪类

 

      ------- 用来匹配URI某一个标志符的目标元素。一般url中包含"#"字符,后面带有一个标志符号,如:"#top"

 

1、浏览器支持情况

 

         除了IE6-8,其他浏览器都支持。

 

       http://caniuse.com/#search=%3Atarget 

 

2、使用方式:

 

 

 

//类似于hover|focus等
selector:target{
    border:1px solid #ccc;
}

 

 

 

扩展阅读:

 

1、http://www.red-team-design.com/get-to-know-your-css3-target-pseudo-class

 

2、http://css-tricks.com/css3-tabs/

 

3、http://webdesignernotebook.com/examples/target.html#b3

 

 

 

 

 

 

1
3
分享到:
评论

相关推荐

    CSS3 target伪类简介

    ### CSS3 `:target` 伪类详解 #### 一、引言 随着Web技术的不断进步和发展,CSS3作为新一代的层叠样式表标准,为网页设计带来了诸多强大而实用的功能。其中,`:target`伪类作为一种重要的选择器,在交互式网页设计...

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

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

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

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

    css3实现的tab标签切换效果

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

    CSS3设计动画综合实战2.pdf

    在这个案例中,折叠面板的实现主要依赖于CSS3的目标伪类`:target`。`:target`伪类用于选择当前活动的锚点目标,即URL中的井号(#)后面的部分。当用户点击一个链接,对应的ID与URL中的`:target`匹配时,该元素将被选中...

    HTML5+CSS3构建同页面表单间的动画切换.pdf

    在 HTML5 中,我们可以使用CSS3 的目标伪类 :target 来创建注册和登录两个表单,并实现它们在同一个页面中的显示转换。这种方法可以让我们的web应用程序更加美丽和交互式。 :target 伪类是一个 CSS 伪类,它可以...

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

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

    HTML5+CSS3构建同页面表单间的动画切换归纳.pdf

    在本文中,我们将探讨如何使用HTML5和CSS3的目标伪类`:target`来实现在同一个页面中,从登录表单平滑过渡到注册表单的动画效果。 首先,我们需要理解`:target`伪类的工作原理。`:target`选择器用于选取当前活动的...

    纯CSS3实现的tab标签

    6. **Active状态的切换**:可以通过CSS的`:target`伪类来实现Tab内容的切换。当用户点击一个Tab链接时,对应的ID会出现在URL的哈希部分,`:target`伪类就可以用来选中当前活动的Tab内容。 下面是一个简单的CSS示例...

    CSS:使用伪类的具有视觉效果的自定义HTML5表单验证

    CSS中的伪类(Pseudo-Classes)是关键,特别是`:valid`和`:invalid`这两个伪类。当输入字段的值符合验证规则时,`:valid`伪类会被应用;反之,如果不符合规则,则`:invalid`伪类会被激活。我们可以为这两个伪类设置...

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

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

    纯css3手写轮播

    而焦点切换可能通过CSS的`:target`伪类实现,当链接的目标ID与元素ID匹配时,该元素将获得焦点,从而改变显示的图片。 总结来说,"纯css3手写轮播"项目展示了如何仅使用CSS3来创建基本的轮播效果,利用了`transform...

    第39章 UI元素状态伪类选择器

    在本章中,我们将深入探讨UI元素状态伪类选择器这一关键CSS概念,它是构建响应式和交互式用户界面的核心工具。伪类选择器允许我们根据元素的不同状态来应用特定的样式,使得网页的视觉反馈更加直观和动态。 首先,...

    深入理解CSS中的UI伪类

    :target伪类是CSS中的另一个重要伪类,它用于高亮显示页面中被链接指向的目标元素。这是通过URL的锚点功能实现的。当用户点击页面上的链接指向一个特定的id时,对应id的元素就会被高亮显示。这对于用户识别目标位置...

    纯CSS模态窗口实现炫酷动画效果

    3. 使用CSS将模态窗口设置为隐藏(如`display: none`),然后通过`:target`伪类在需要时显示。 4. 根据需求调整动画类,如`fadeIn`或`slideInUp`,以实现不同的打开效果。 5. 为了让模态窗口可关闭,可以添加一个...

    HTML5+CSS3构建同页面表单间的动画.pdf

    总结来说,这篇文章深入浅出地介绍了如何使用HTML5和CSS3来构建同页面表单间的动画切换效果,特别强调了`:target`伪类在实现这一功能中的关键作用。对于前端开发者来说,这是一个很好的实践案例,有助于提升他们创建...

    CSS3 多种TAB选项卡效果

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

    纯CSS实现导航栏Tab切换效果

    首先,要了解的关键概念是CSS3中的:target伪类。:target伪类是一个选择器,用于选取URL中ID与锚点匹配的元素。当用户点击一个带有锚点的链接时,页面会跳转到对应ID的位置,此时匹配到的元素会被显示出来。 在实现...

Global site tag (gtag.js) - Google Analytics