图解css3:核心技术与案例实战. 2.4 动态伪类选择器

简介:

2.4 动态伪类选择器

伪类选择器对于大家来说最熟悉的莫过于“:link”、“:visited”、“:hover”、“:active”,因为这些是大家平时常用到的伪类选择器。而CSS3的伪类选择器可以分成六种:动态伪类选择器、目标伪类选择器、语言伪类选择器、UI状态伪类选择器、结构伪类选择器和否定伪类选择器。

伪类选择器语法书写时和其他的CSS选择器写法有所区别,都以冒号(:)开头。例如:

E:pseudo-class {property:value}

其中E为HTML中的元素;pseudo-class是CSS的伪类选择器名称;property是CSS的属性;value为CSS属性值。

CSS3伪类选择器有什么功能?选定元素能带来什么便利?带着这些问题,依次学习CSS3伪类选择器的使用方法,首先是动态伪类选择器。

2.4.1 动态伪类选择器语法

动态伪类早在CSS中就有,其并不是CSS3才有的,动态伪类并不存在于HTML中,只有当用户和网站交互的时候才能体现出来。动态伪类包含两种,第一种是在链接中常看到的锚点伪类,另一种为用户行为伪类。其详细说明如表2-5所示。

表2-5 动态伪类选择器语法

选择器     类型         功能描述

E:link         链接伪类选择器     选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接锚点上

E:visited   链接伪类选择器     选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接锚点上

E:active    用户行为伪类选择器     选择匹配的E元素,且匹配元素被激活。常用于锚点与按钮上

E:hover    用户行为伪类选择器     选择匹配的E元素,且用户鼠标在停留在元素E上。IE 6及以下浏览器仅支持a:hover

E:focus     用户行为伪类选择器     选择匹配的E元素,且匹配的元素获得焦点

 

意     锚点伪类的设置必须遵守一个“爱恨原则”LoVe/HAte,也就是“link-visited-hover-active”。另外,在 IE 6、IE 7(Q)、IE 8(Q) 中,a:hover、a:active 和 a:visited 并没有按照规范描述的算法来计算它们的针对性,而是根据链接的实际状态来决定使用哪个规则集里的声明。它们三个的针对性比 a:link 强,详细参阅 http://www.w3help.org/zh-cn/causes/RS3005。

 

2.4.2 浏览器兼容性

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

表2-6 动态伪类选择器浏览器兼容性

选择器                                         

选择器                                         

E:link         √     √     √     √     √

E:visited           √     √     √     √     √

E:active    8 +√        √     √     √     √

E:hover    √     √     √     √     √

E:focus     8 +√        √     √     √     √

 

意     E:hover在IE 6浏览器中仅支持链接锚点a:hover。

 

2.4.3 实战体验:美化按钮

在众多网站上按钮在不同状态下效果不一,用以增强用户体验,这也是一种非常好的设计体验与细节。实现并不复杂,下面一起来看Twitter的Bootstrap如何美化按钮。

实现页面中按钮在不同行为状态下的样式风格,常见的行为状态如默认状态、悬浮状态、用户点击时状态和按钮获得焦点状态。

通过Twitter的Bootstrap制作的按钮效果如图2-14所示。

根据用户的行为不同,按钮效果可以分为:默认状态、悬浮状态、点击时状态、焦点状态和点击后状态,可以按照CSS3的动态伪选择器,在不同状态下给按钮赋予不同的样式风格。

根据这一设计思路,可以轻松美化按钮,看下面的示例代码,演示的效果如图2-14所示。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

  <meta charset="UTF-8">

  <title>使用动态伪类选择器美化按钮</title>

  <style type="text/css">

    .download-info {

      text-align: center;

    }

    /*默认状态下的按钮效果*/

    .btn {

      background-color: #0074cc;

      *background-color: #0055cc;

      /*CSS3渐变制作背景图片*/

      background-image: -ms-linear-gradient(top, #0088cc, #0055cc);

      background-image: -webkit-gradient(linear, 0 0, 0 100%,

                                               from(#0088cc), to(#0055cc));

      background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);

      background-image: -o-linear-gradient(top, #0088cc, #0055cc);

      background-image: -moz-linear-gradient(top, #0088cc, #0055cc);

      background-image: linear-gradient(top, #0088cc, #0055cc);

      background-repeat: repeat-x;

      display: inline-block;

      *display: inline;

      border: 1px solid #cccccc;

      *border: 0;

      border-color: #ccc;

      /*CSS3的色彩模块*/

      border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

      border-radius: 6px;

      color: #ffffff;

      cursor: pointer;

      font-size: 20px;

      font-weight: normal;

      filter: progid:dximagetransform.microsoft.gradient

                   (startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);

      filter: progid:dximagetransform.microsoft.gradient(enabled=false);

      line-height: normal;

      padding: 14px 24px;

      text-align: center;

      /*CSS3文字阴影特性*/

      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

      text-decoration: none;

      vertical-align: middle;

      *zoom: 1;

    }

    /*悬浮状态下按钮效果*/ 

    .btn:hover {

      background-position: 0 -15px;

      background-color: #0055cc;

      *background-color: #004ab3;

      color: #ffffff;

      text-decoration: none;

      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

      /*CSS3动画效果*/

      -webkit-transition: background-position 0.1s linear;

      -moz-transition: background-position 0.1s linear;

      -ms-transition: background-position 0.1s linear;

      -o-transition: background-position 0.1s linear;

      transition: background-position 0.1s linear;

    }

    /*点击时按钮效果*/

    .btn:active {

      background-color: #0055cc;

      *background-color: #004ab3;

      background-color: #004099 \9;

      background-image: none;

      outline: 0;

      /*CSS3盒子阴影特性*/

      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),

                             0 1px 2px rgba(0, 0, 0, 0.05);

      color: rgba(255, 255, 255, 0.75);

    }

    /*获得焦点按钮效果*/

    .btn:focus {

      outline: thin dotted #333;

      outline: 5px auto -webkit-focus-ring-color;

      outline-offset: -2px;

    }

  </style>

</head>

<body>

  <div class="download-info">

    <a href="#" class="btn">View project on GitHub</a>

  </div>

</body>

</html>

这个美化按钮实例涉及一些CSS3的特性,此时不懂不要害怕,本书后续章节中会为大家逐一介绍。在此例中只需要知道哪些属性是CSS3的特性就足够了。同时实例中采用了“渐进增强,优雅降级”,在不支持CSS3的浏览器中,同样可以看到按钮在不同状态下的效果,只是失去了渐变、阴影等效果,但并不影响网站的功能与用户的体验,IE 8下的效果如图2-15所示。

相关文章
|
8天前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
16 7
|
1月前
|
前端开发
CSS语言的选择器
CSS语言的选择器
|
1月前
|
前端开发
web前端开发---CSS基础选择器
web前端开发---CSS基础选择器
16 1
N..
|
19天前
|
前端开发 UED
CSS选择器
CSS选择器
N..
7 0
|
23天前
|
前端开发
CSS3的几个变形案例……
CSS3的几个变形案例……
14 0
|
24天前
mvc.net分页查询案例——mvc-paper.css
mvc.net分页查询案例——mvc-paper.css
4 0
|
27天前
|
前端开发
css选择器
css选择器【2月更文挑战第26天】
25 12
|
30天前
|
前端开发 JavaScript 开发者
前端的CSS选择器
前端的CSS选择器
18 1
|
1月前
|
前端开发 开发者
掌握CSS中的常见选择器
掌握CSS中的常见选择器
27 0
|
1月前
|
前端开发
CSS选择器十二种方法
CSS选择器十二种方法