图解css3:核心技术与案例实战. 2.11 属性选择器

简介:

2.11 属性选择器

在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过id属性可以将不同DIV元素进行区分。CSS2中引入了一些属性选择器,这些选择器可基于元素的属性来匹配元素,而CSS3在CSS2的基础上扩展了这些属性选择器,支持基于模式匹配来定位元素。

2.11.1 属性选择器语法

CSS3在CSS2的基础上新增了3个属性选择器,可以帮助大家对标签进行过滤,也能非常容易帮助大家在众多标签中定位自己需要的HTML标签,下面通过表2-18详细介绍CSS3的属性选择器的使用。

表2-18 CSS3属性选择器列表

选择器     功能描述

选择器     功能描述

E[attr]      选择匹配具有属性attr的E元素。其中E可以省略,表示选择定义了attr属性的任意类型元素

E[attr=val]        选择匹配具有属性attr的E元素,并且attr的属性值为val(其中val区分大小写),同样E元素省略时表示选择定义了attr属性值为val的任意类型元素

E[attr|=val]      选择匹配E元素,且E元素定义了属性attr,attr属性值是一个具有val或者以val-开始的属性值。常用于lang属性(例如lang=”en-us”)。例如p[lang=en]将匹配定义为英语的任何段落,无论是英式英语还是美式英语

E[attr~=val]      选择匹配E元素,且E元素定义了属性attr,attr属性值具有多个空格分隔的值,其中一个值等于val。例如,.info[title~=more]将匹配元素具有类名info,而且这个元素设置了一个属性title,同时title属性值以包含了“more”的任何元素,例如<a class=”info” title=”click here for more information”>click me</a>

E[attr*=val]      选择匹配元素E,且E元素定义了属性attr,其属性值任意位置包含了“val”。换句话说,字符串val与属性值中的任意位置相匹配

E[attr^=val]      选择匹配元素E,且E元素定义了属性attr,其属性值以val开头的任何字符串

E[attr$=val]      选择匹配元素E,且E元素定义了属性attr,其属性值以val结尾的任何字符串。刚好与E[attr^=val]相反

 

CSS3遵循了惯用的编码规则,通配符的使用提高了样式表的书写效率,也使CSS3的属性选择器更符合编码习惯。CSS3中常见的通配符如表2-19所示。

表2-19 CSS3中常见的通配符

通配符     功能描述         示例

^       匹配起始符     span[class^=span]

表示选择以类名以“span”开头的所有span元素

$       匹配终止符     a[href$=pdf]

表示选择以”pdf”结尾的href属性的所有a元素

*       匹配任意字符         a[title*=site]

匹配a元素,而且a元素的title属性值中任意位置有“site”字符的任何字符串

 

2.11.2 浏览器兼容性

属性选择器在浏览器兼容性方面表现还是可以的,如表2-20所示。

表2-20 属性选择器的浏览器兼容性

选择器                                         

E[attr]      7 +√        √     √     √     √

E[attr=val]        7 +√        √     √     √     √

E[attr|=val]      7 +√        √     √     √     √

E[attr~=val]      7 +√        √     √     √     √

E[attr*=val]      7 +√        √     √     √     √

E[attr^=val]      7 +√        √     √     √     √

E[attr$=val]      7 +√        √     √     √     √

 

2.11.3 属性选择器的使用方法详解

前面了解了CSS3属性选择器的使用规则以及浏览器兼容性,接下来通过一些简单的示例来体验一下CSS3属性选择器的强大功能。

先创建一个简单的HTML结构,并付上一些默认样式。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

  <meta charset="UTF-8">

  <title>CSS3属性选择器的使用</title>

  <style type="text/css">

    .demo {

      width: 300px;

  border: 1px solid #ccc;

  padding: 10px; 

      overflow: hidden;

      margin: 20px auto;

  }

  .demo a {

  float: left;

  display: block;

  height: 50px;

  width: 50px;

  border-radius: 10px;

  text-align: center;

  background: #aac;

  color: blue;

     font: bold 20px/50px Arial;

  margin-right: 5px;

  text-decoration: none;

     margin: 5px;

  }

  </style>

</head>

<body>

  <div class="demo">

  <a href="http://www.w3cplus.com" target="_blank"

           class="links item first" id="first" title="w3cplus">1</a>

  <a href="" class="links active item" title="test

           website" target="_blank" lang="zh">2</a>

  <a href="sites/file/test.html" class="links item"

           title="this is a link" lang="zh-cn">3</a>

  <a href="sites/file/test.png" class="links item"

           target="_balnk" lang="zh-tw">4</a>

  <a href="sites/file/image.jpg" class="links item"

           title="zh-cn">5</a>

  <a href="mailto:w3cplus@hotmail" class="links item"

           title="website link" lang="zh">6</a>

  <a href="/a.pdf" class="links item"

           title="open the website" lang="cn">7</a>

  <a href="/abc.pdf" class="links item"

           title="close the website" lang="en-zh">8</a>

  <a href="abcdef.doc" class="links item"

           title="http://www.sina.com">9</a>

  <a href="abd.doc" class="linksitem last" id="last">10</a>

  </div>

</body>

</html>

基本样式的效果如图2-53所示。

接下来使用CSS3属性选择器进行个性化修改。

1.E[attr]属性选择器

这个属性选择器是最简单的一种。用来选择有某个属性的元素,而不论这个属性值是什么。例如,选择所有带有ID属性的a元素,并且改变了匹配元素的背景色,如下所示。

a[id]{background-color:yellow;}

对照上面的HTML结构不难发现,只有第一个和最后一个链接元素a使用了ID属性,所以上面的代码选择了两个a元素,效果如图2-54所示。

 

图2-54 E[attr]属性选择器的效果

也可以使用多属性进行选择元素。例如:

a[id][title]{background-color: red;}

上面代码表示元素a只要同时定义了id和title属性,都将匹配,其背景将变成红色,效果如图2-55所示。

2.E[attr=val]属性选择器

E[attr=val]是指元素E设置了属性attr,并且其属性值为“val”,而E[attr]属性选择器只选择了属性为attr的元素E,并没有明确的设置attr的属性值,这也是这两种选择器的最大区别之处。在众多元素之中缩小选择范围,能进一步精确选择自己需要的元素。在前面的实例基础上进行一下简单的修改。

 

图2-55 E[attr1][attr2]多属性选择器使用效果

a[id=first]{background-color:red;}

此处在id属性的基础上指定了相应的val值为first,选中所有a元素中设置“id=first”的链接,并将其背景色设置为red,效果如图2-56所示。

 

图2-56 E[attr=val]属性选择器的使用效果

意     E[attr=val]选择器中,属性和属性值必须完全匹配,特别对于属性值是词列表的形式,例如,

<a href="#" class="links  item"></a>

其中a[class="links"]{...}是找不到匹配元素,只有a[class="links  item"]{...}才匹配。

 

3.E[attr|=val]属性选择器

首先提醒大家,attr后面的是一条竖线,而不是字母。E[attr|=val]为特定属性选择器,选择attr属性值等于“val”,或以“val-”开头的所有字符串属性的元素,一起来看看这个属性选择器的使用。

a[lang|=zh]{background-color: yellow;}

上面的代码会选中所有设置了lang属性,并且其属性值是以“zh”或“zh-”开头的所有a链接元素,其效果如图2-57所示。

 

图2-57 E[attr|=val]选择器的使用效果

例如Web页面中有很多图片,图片文件名都以“figure-1”、“figure-2”的方式来命名,使用E[attr|=val]选择器来选择这些图片就很方便了。

4.E[attr?~=val]属性选择器

如果想根据元素属性值中的词列表的某个词来匹配需要的元素,就可以使用这个属性选择器。这种属性选择器匹配的元素某个属性具有一个或多个属性值,多个属性值之间使用空格隔开,当元素属性值中有一个属性值与选择器的val相匹配,就可以选中该元素。而前面介绍的E[attr=val]属性选择器是属性值要完全匹配才会被选中,它们两者区别就是“~”符号。一起来看一个简单的示例。

a[title~=website]{background-color:yellow;}

效果如图2-58所示。

图2-58很清楚地告诉我们,只要a链接元素设置有title属性,并且这个title属性的值包含了website属性值,都将匹配。如果不小心将“~”省略,结果将找不到匹配的元素。

5.E[attr*=val]属性选择器

这个属性选择器使用了通配符,将匹配元素设置了attr属性,而且attr属性值中包含“val”字符串。也就是说,只要所选择的属性中有val字符串,都将被匹配。例如:

 

图2-58 E[attr~=val]选择器的使用效果

a[class*=links]{background-color:yellow;}

这个示例将选中所有的a元素,因为示例中的a元素“class”的属性值都含有字符串“links”,不管是“links”还是“linksitem”,其效果如图2-59所示。

 

图2-59 E[attr*=val]属性选择器的使用效果

E[attr*=val]与E[attr~=val]很容易混淆,它们的区别是:E[attr*=val]匹配的是元素属性值中只要包含“val”字符串就可以,而E[attr~=val]匹配的是元素属性值中要包含“val”,并不仅是字符串。例如,a[title~=links]属性值中的links是一个单词,而a[title*=links]中的links不一定是一个单词,就如上面的示例中,可以是“linksitem”。换句话来说,“<a  title='linksitem'></a>”元素只有a[title*=links]匹配,但是“<a  title='links  item'></a>”元素,a[title~=links]和a[title*=links]都匹配。

6.E[attr^=val]属性选择器

指选择attr属性值以“val”开头的所有元素。换句话说,选择的属性,其对应的属性值是以“val”开始的,一起来看一个简单的示例。

a[href^=http]{background-color:yellow;}

这个选择器表示选择href属性,以“http”开头的所有a元素,即只要a元素中的href属性值是以“http”开头的元素都会选中,如图2-60所示。

 

图2-60 E[attr^=val]属性选择器的使用效果

前面有一个属性选择器E[attr|=val]匹配的是以“val”或者“val-”开头的元素,而E[attr^=val]匹配的是以“val”开头的元素,这两个选择器有时使用的效果非常相似,仅仅区别在于E[attr|val]还匹配以“val-”开头的元素,其中“-”是不可或缺的。

7.E[attr$=val]属性选择器

这个属性选择器刚好与E[attr^=val]相反,表示选择attr属性值以“val”结尾的所有元素。运用在一些特殊的链接加背景图很方便,例如给PDF、PNG、DOC等不同文件加上不同的ICON图标就可以使用这个属性。下面通过给“png”值结尾的a元素改变背景色。

a[href$=png]{background-color:yellow;}

运用上面代码的效果如图2-61所示。

通过一些简单的示例,向大家详细介绍了CSS3属性选择器的使用方法,以及效果,接下来通过实战来学习CSS3属性选择器在Web中是如何发挥作用。

 

图2-61 E[attr$=val]属性选择器的使用效果

2.11.4 实战体验:创建个性化链接样式

对于Web设计人员来说碰到的链接有很多种,例如文字、图片等。

例如新浪爱问共享资料库,下载文档列表的链接前面会显示一个文档类型图标(如图2-62所示),这样的设计给用户带来一种超好的体验。另外,有些Web网站对于本地链接和外部链接也会使用不同的图标来区分(如图2-63所示)。CSS3的属性选择器此时就显得特别的有用,通过它们可以很容易实现这些效果。

                  

         图2-62 显示类型图标的文档下载链接     图2-63 Web页面的外部链接

本节示例的效果如图2-64所示,当然此效果只是部分CSS3属性选择器的运用。

图2-62和图2-63的链接效果,使用属性选择器匹配a元素中的href属性值。如果a元素的href属性值是以“http://”开头,将这些链接划分到外部链接一类中,给其定义一个样式,对于下载文档的类型可以根据其文件的扩展名来设置不同的图标。例如,链接为Word文件时,后面显示Word文档图标;链接为PDF文件时,后面显示PDF文档图标。

根据这一思路,可以编写一个简化的示例代码,如下所示。

 

图2-64 创建个性化链接

<!DOCTYPE HTML>

<html lang="en-US">

<head>

  <meta charset="UTF-8">

  <title>创建个性化链接样式</title>

  <style type="text/css">

    a {

      font-size: 16px;

      text-decoration: none;

      padding-right: 20px;

      display: inline-block;

      margin-bottom: 5px;

      background: url(a.png) no-repeat 100% -327px;

    }

    /*匹配所有外部链接*/

    a[href^="http://"]{

      background-position: 100% -409px;

    }

    /*匹配首页*/

    a[href="home"]{

      background-position: 100% -382px;

    }

    /*匹配.doc文档*/

    a[href$="doc"]{

      background-position: 100% 0;

    }

    /*匹配.ppt文档*/

    a[href$="ppt"]{

      background-position:100% -50px;

    }

    /*匹配.xls文档*/

    a[href$="xls"]{

      background-position:100% -75px;

    }

    /*匹配.html文档*/

    a[href$="html"]{

      background-position:100% -100px;

    }

    /*匹配.pdf文档*/

    a[href$="pdf"]{

      background-position:100% -125px;

    }

    /*匹配.jpg,.gif,.png图片*/

    a[href$="jpg"],

    a[href$="gif"],

    a[href$="png"]{

      background-position:100% -172px;

    }

    /*匹配.swf文档*/

    a[href$="swf"]{

      background-position:100% -193px;

    }

    /*匹配.zip,.rar压缩文档*/

    a[href$="zip"],

    a[href$="rar"]{

      background-position:100% -217px;

    }

    /*匹配.mp3文档*/

    a[href$="mp3"]{

      background-position:100% -245px;

    }

    /*匹配.exe安装文件*/

    a[href$="exe"]{

      background-position:100% -273px;

    }

    /*匹配.txt文本文档*/

    a[href$="txt"]{

      background-position:100% -298px;

    }

    /*匹配邮箱地址*/

    a[href^="mailto"]{

      background-position:100% -350px;

    }

  </style>

</head>

<body>

  <ul>

    <li><a href="http://www.w3cplus.com">w3cplus.com</a></li>

    <li><a href="home">home</a></li>

    <li><a href="a.doc">Word文档</a></li>

    <li><a href="b.ppt">Powerpoint文档</a></li>

    <li><a href="c.xls">Excel文档</a></li>

    <li><a href="d.html">HTML文档</a></li>

    <li><a href="e.pdf">PDF文档</a></li>

    <li><a href="f.jpg">JPG图片文档</a></li>

    <li><a href="f.gif">GIF图片文档</a></li>

    <li><a href="f.png">PNG图片文档</a></li>

    <li><a href="g.swf">Flash文档</a></li>

    <li><a href="h.zip">ZIP压缩文档</a></li>

    <li><a href="h.rar">RAR压缩文档</a></li>

    <li><a href="j.mp3">MP3文档</a></li>

    <li><a href="h.exe">EXE安装文件</a></li>

    <li><a href="a.txt">TXT文本文档</a></li>

    <li><a href="mailto:w3cplus@hotmial.com">w3cplus@hotmail.com</a></li>

    <li><a href="#">本地链接</a></li>

  </ul>

</body>

</html>

由于IE 6浏览器不被支持CSS3属性选择器,为了实现图2-64效果,早期的Web设计师们会借助于JavaScript脚本,或者通过古老的办法给不同文档类型元素添加不同的类名,例如给外部链接添加类名“external”,给Word文档添加类名“word”。

意     随着IE 6逐渐接近死亡,可以大胆使用CSS3属性选择器来制作,或者你是一个完美的追求者,可以考虑优雅降级方案来处理。

相关文章
|
22天前
|
前端开发
css子类选择器的应用场景实战
css子类选择器的应用场景实战
22 0
|
23天前
|
前端开发
css3 纯代码案例
css3 纯代码案例
27 0
|
24天前
|
前端开发 JavaScript 开发者
优化CSS重置过程:探索CSS层叠技术的应用与优势
这篇文章介绍了一种名为CSS层叠的技术,用于优化CSS重置过程。它解释了CSS重置的概念,即通过删除浏览器默认样式来确保在不同浏览器上呈现一致的外观。然后,它引入了CSS层叠技术,以更好地控制样式的层次结构和优先级。
|
30天前
|
存储 前端开发 算法
【正在完善】高级CSS特效解析其示范案例
【正在完善】高级CSS特效解析其示范案例
118 0
|
30天前
|
前端开发 UED
不可或缺的前端技术之CSS选择器
CSS选择器是前端开发中不可或缺的技术,它能够通过简洁而强大的语法来选择网页中的元素,并对其进行样式的设置。本文将介绍CSS选择器的基本用法和常见类型,帮助读者更好地掌握前端开发中的样式选择技巧。
|
1月前
|
前端开发
CSS总结笔记+案例(下)
CSS总结笔记+案例
37 1
|
1月前
|
前端开发 Python
CSS总结笔记+案例(上)
CSS总结笔记+案例
27 1
|
1月前
|
前端开发
前端实战_手撕HTML、CSS
前端实战_手撕HTML、CSS
|
1月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
11 0
|
1月前
|
前端开发 JavaScript API
2022年CSS生态圈技术趋势!(下)
2022年CSS生态圈技术趋势!(下)