图解css3:核心技术与案例实战. 2.5 目标伪类选择器

简介:

2.5 目标伪类选择器

目标伪类选择器“:target”是众多实用的CSS3特性中的一个,用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说,URI中的标志符通常会包含一个井号(#),后面带有一个标志符名称,例如“#contact”“:target”就是用来匹配ID为“contact”的元素的。换种说法,在Web页面中,一些URL拥有片段标识符,它由一个井号(#)后跟一个锚点或元素ID组合而成,可以链接到页面的某个特定元素。“:target”伪类选择器选取链接的目标元素,然后供定义样式。

2.5.1 目标伪类选择器语法

目标伪类选择器的语法如表2-7所示。

意     目标伪类选择器是动态选择器,只有存在URL指向该匹配元素时,样式效果才会生效。

 

2.5.2 浏览器兼容性

浏览器兼容性如表2-8所示。

表2-8 目标伪类选择器浏览器兼容性

选择器                                         

E:target   9 +√        √     √     9.6 +√     √

 

从表2-8可知,目标伪类选择器在IE 8及之前版本不被支持,但IE 用户点击目录里的链接仍将跳转到相应的标题,只是标题不会高亮显示。

示     在包含更多内容的页面中,高亮显示效果的确能给用户带来极好的体验。如果页面效果需要兼容IE低版本浏览器,就要用到JavaScript。这里有一些资源供大家参考。

●?“Suckerfish :target”,作者:Patrick Griffiths 和Dan Webb,网址如下。

 ?http://www.htmldog.com/articles/suckerfish/target

●?“Improving the usability of within-page links ”,作者:Bruce Lawson,网址如下。

 ?http://dev.opera.com/articles/view/improving-the-usability-of-within-page-l/

 

2.5.3 实战体验:制作手风琴效果

以前制作手风琴效果(Accordion)需要依赖JavaScript脚本。CSS3的目标伪选择器可不使用任何JavaScript代码实现手风琴效果。

页面中有三个区块,默认状态只显示三个区块的标题,点击其中一个标题时,其对应的内容就会显示;点击另一个标题时,对应区块内容将显示,而前一块内容将隐藏。目标伪类选择器制作的页面效果如图2-16所示。

通过目标伪类选择器“E:target”,显示和隐藏不同栏目的内容,从而实现手风琴效果。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

  <meta charset="UTF-8">

  <title>垂直手风琴</title>

  <style type="text/css">

.accordionMenu {

  background: #fff;

  color:#424242;

  font: 12px Arial, Verdana, sans-serif;

  margin:0 auto;

  padding: 10px;

  width: 500px;

}

.accordionMenu h2 {

  margin:5px 0;

  padding:0;

  position: relative;

}

.accordionMenu h2:before {/*制作向下三角效果*/

  border: 5px solid #fff;

  border-color: #fff transparent transparent;

  content:"";

  height: 0;

  position:absolute;

  right: 10px;

  top: 15px;

  width: 0;

}

.accordionMenu h2 a {/*制作手风琴标题栏效果*/

  background: #8f8f8f;

  background: -moz-linear-gradient( top, #cecece, #8f8f8f);

  background: -webkit-gradient(linear, left top, left bottom,

               from(#cecece), to(#8f8f8f));

  background: -webkit-linear-gradient( top, #cecece, #8f8f8f);

  background: -o-linear-gradient( top, #cecece, #8f8f8f);

  background: linear-gradient( top, #cecece, #8f8f8f);

  border-radius: 5px;

  color:#424242;

  display: block;

  font-size: 13px;

  font-weight: normal;

  margin:0;

  padding:10px 10px;

  text-shadow: 2px 2px 2px #aeaeae;

  text-decoration:none;

}

.accordionMenu :target h2 a, /*目标标题的效果*/

.accordionMenu h2 a:focus,

.accordionMenu h2 a:hover,

.accordionMenu h2 a:active {

  background: #2288dd;

  background: -moz-linear-gradient( top, #6bb2ff, #2288dd);

  background: -webkit-gradient(linear, left top, left bottom,

             from(#6bb2ff), to(#2288dd));

  background: -webkit-linear-gradient( top, #6bb2ff, #2288dd);

  background: -o-linear-gradient( top, #6bb2ff, #2288dd);

  background: linear-gradient( top, #6bb2ff, #2288dd);

  color:#FFF;

}

.accordionMenu p {/*标题栏对应的内容*/

  margin:0;

  height: 0;/*默认栏目内容高度为0,达到隐藏效果*/

  overflow: hidden;

  padding:0 10px;

  -moz-transition: height 0.5s ease-in;

  -webkit-transition: height 0.5s ease-in;

  -o-transition: height 0.5s ease-in;

  transition: height 0.5s ease-in;

}

/*这部分是显示内容的关键代码*/

.accordionMenu :target p {/*展开对应目标内容*/

  height:100px;/*显示对应目标栏内容*/

  overflow: auto;

}

.accordionMenu :target h2:before {/*展开时标题三角效果*/

  border-color: transparent transparent transparent #fff;

}

  </style>

</head>

<body>

  <div class="accordionMenu">

        <div class="menuSection" id="brand">

      <h2><a href="#brand">Brand</a></h2>

      <p>Lorem ipsum dolor...</p>

        </div>

        <div class="menuSection" id="promotion">

            <h2><a href="#promotion">Promotion</a></h2>

            <p>Lorem ipsum dolor sit amet...</p>

        </div>

        <div class="menuSection" id="event">

            <h2><a href="#event">Event</a></h2>

            <p>Lorem ipsum dolor sit amet...</p>

        </div>

  </div>

</body>

</html>

维基百科的官网上就运用了目标伪类选择器来高亮显示脚注,如图2-17所示。

 

图2-17 目标伪类选择器高亮显示区块的运用

点击注解的上标链接时,其对应的注解内容区块就会高亮显示,以便用户在众多内容中找到对应的注解内容,方便用户阅读,而实现此功能仅一行代码就完成了。

ol.references > li:target, sup.reference:target, cite:target {

  background-color:#def;

除了能制作手风琴效果、高亮显示脚注之外,目标伪类选择器还可以用在以下场景,如表2-9所示。

表2-9 “:target”应用场景

效果         地址

高亮显示区块         http://www.red-team-design.com/get-to-know-your-css3-target-pseudo-class

从相互层叠的盒容器或图片中突出显示其中一项     http://virtuelvis.com/ gallery/ css3/ target/interface.html

tabs效果         http://css-tricks.com/css3-tabs/

幻灯片效果     http://designmodo.com/slider-css3/

灯箱效果         http://www.decodize.com/demos/CSS3-target-pseudo-class/gallery.html

相册效果         http://www.ie7nomore.com/fun/scroll/

 

注意 其中几项效果使用JavaScript制作效果会更好,因为纯CSS的版本可能存在潜在的易用性和可用性问题。

相关文章
|
13天前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
16 7
|
1月前
|
前端开发
CSS语言的选择器
CSS语言的选择器
|
1月前
|
前端开发
web前端开发---CSS基础选择器
web前端开发---CSS基础选择器
20 1
|
3天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
14 1
N..
|
24天前
|
前端开发 UED
CSS选择器
CSS选择器
N..
9 0
|
28天前
|
前端开发
CSS3的几个变形案例……
CSS3的几个变形案例……
16 0
|
29天前
mvc.net分页查询案例——mvc-paper.css
mvc.net分页查询案例——mvc-paper.css
5 0
|
1月前
|
前端开发
css选择器
css选择器【2月更文挑战第26天】
25 12
|
1月前
|
前端开发 JavaScript 开发者
前端的CSS选择器
前端的CSS选择器
19 1
|
1月前
|
前端开发 开发者
掌握CSS中的常见选择器
掌握CSS中的常见选择器
34 0