欢迎光临：豆豆猫的窝

4.2 CSS选择器——（4）

4.2.8 属性选择器（Attribute Selectors）
顾名思义，属性选择器可以根据某个属性是否存在或属性的值来匹配元素。因此能够实现一些比较复杂的匹配。
属性选择器有四种匹配方式，各有特色。

1. 简易属性匹配

简易的属性匹配定义如图4-12所示。只匹配具有“att”属性名称的E元素，而不考虑“att”的值为何。

图4-12 属性匹配选择器
例如有代码如下，则其在浏览器内的效果如图4-13所示。


图4-13 使用属性匹配选择器定义CSS的显示效果

属性匹配可以匹配该元素任何合法的(X)HTML属性，也可以同时匹配多种属性，例如有代码如下，其在浏览器内的效果如图4-14所示。

 
图4-14匹配多个属性的属性选择器的显示效果


2. 精确值匹配

精确值匹配的属性选择器选择具有指定的属性且属性值等于指定的值的元素，例如：

则将匹配具有“type="text"”属性的<input>元素，例如有XHTML代码如下，则其在浏览器内的显示如图4-14所示。


图4-15值匹配的属性选择器的显示效果

值匹配的属性选择器也可以同时匹配多种属性，例如：




3. 部分值匹配

(X)HTML元素（或者非(X)HTML的其他类型文件的元素）的某些属性值可以是多个，中间以空格分开，例如在[4.1.4 类选择器]中介绍了一个元素设定多个类的情况。而当要匹配多个属性值中的某一个的时候，就需要使用部分值匹配的属性选择器，其定义如图4-16所示。

图4-16部分值匹配的属性匹配选择器

图4-16表示，所有E元素中具有“att”属性且该属性包含“val”值的那些元素。例如有代码如下，则其在浏览器内的显示如图4-17所示。


图4-17 部分值匹配的属性选择器的显示效果

<p>元素的class属性的值不分先后顺序，只要包含值“main”则匹配元素。此时选择器内的值中不能包含空格，例如下面的代码是错误的：



4. 特殊匹配

特殊匹配的属性选择器定义如图4-18所示。

图4-18 特殊匹配的属性匹配选择器

当元素的“att”属性值是一个以英文“-”号分割的字词列表，并且以“val”开头，则匹配成功。匹配总是从属性值的头上开始。例如有XHTML代码如下，则其在浏览器内显示如图4-19所示。


图4-19 特殊匹配的属性选择器的显示效果

特殊匹配对于一些遵循同一命名规范来定义的属性值非常有效，例如，某些图片全部以“picture-”开头，而后跟随编号，那么，要对这些图片设定CSS就可以使用特殊匹配：

此日志的引用地址
GB2312 http://www.ddcat.net/blog/tback.php?id=220&encode=gb2312
UTF-8 http://www.ddcat.net/blog/tback.php?id=220&encode=utf-8