【CSS3 :target伪类的理解与使用】的更多相关文章

CSS3 :target伪类的理解与使用

CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支持: 不支持IE8及以下的IE版本,IE9支持这个属性,其它非IE内核浏览器如:Firefox.Chrome.等这些浏览器都支持. 用法: :target伪类与:hover.:link.:visited.:focus等伪类的用法一样 :target {color:blue} 实例:CSS3 :…

巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义. 先上效果图 正如标题所说,本文是教你如何巧用CSS3 :target 伪类制作Dropdown下拉菜单,原生HTML+CSS,无JavaScript.为了吸引各位往下看,先上实际例子,再进行剖析. Duang~ 实际例子其…

CSS3 target伪类简介

CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如#respond,target就是用来匹配ID为respond的元素的. 现在在页面中,点击一个ID链接后,页面只会跳转到相应的位置,但是并不会有比较明显的UI标识,使用:target伪类可以像:hover等伪类一样对目标元素定义样式.…

CSS3 :target伪类实现Tab切换效果

用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; background: #fff; } #song-info:target, #song-lyricCN:target, #song-lyricEN:target { z-index:; } html代码: <div class="song-nav"> <ul class="so…

CSS3 target 伪类不得不说那些事儿（纯CSS实现tab切换）

是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.:link.:visited.:focus等等,target用法跟他们是同出一辙的. 官方定义是: URL 带有后面跟有锚名称 #,指向文档内某个具体的元素.这个被链接的元素就是目标元素(target element). :target 选择器可用于选取当前活动的目标元素. 如果你是第一次看到这个定义,是不是有…

CSS3 :target伪类实现Tab切换效果 BY commy

http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1 标签一 标签二 标签三 欢迎加设计达人Q群:50063010设计达人以原创和分享一些高质量的设计文章为主,希望喜欢! 本Tab切换效果纯CSS3制作,无任何JavaScript 最新Q群:50063010爱设计,爱分享——设计达人(http://www.shejidaren.com) 高质量设计文章分享平台 欢迎加设计达人Q群:50063010设计达人以原创和…

巧用CSS3：target 伪类制作Dropdown下拉菜单（无JS）

原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id="comment"的位置,俗称锚).CSS3 为这个动作赋予了更加多的功能--就如同:hover 一样你可以做一些样式定义. 先上效果图 正如标题所说,本文是教你如何巧用CSS3:target伪类制作Dropdown下拉菜单,原生HTM…

实用CSS3属性之 :target伪类实现Tab切换效果

CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支持: 不支持IE8及以下的IE版本,IE9支持这个属性,其它非IE内核浏览器如:Firefox.Chrome.等这些浏览器都支持. 用法: :target伪类与:hover.:link.:visited.:focus等伪类的用法一样 :target {color:blue} 实例:CSS3 :tar…

CSS3属性之 target伪类实现Tab切换效果

CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式 代码示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>target伪类实现Tab切换效果</title> <style type="text/css"> p{ bond:li; } .tablis…

CSS3 target 选择器_:target伪类的使用

target作为目标伪类选择器,是css3中的新特性之一,目前已经支持所有主流浏览器,除了 IE8 及更早的版本.target伪类的主要是用于匹配文档中uri中某个标志符的目标元素,具体来说,uri中的标志通常会包含一个#,后面带有一个标志符名称,如#box_one,:target就是匹配ID为"box_one"的目标元素. 举个简单的例子: 如一个页面中有一个a标签,它的href如下:<a href="#box-three">Tab 3</a&g…