9.7　按属性选择元素

可以对具有给定属性或属性值的元素进行格式化（参见图9.7.1、图9.7.2和图9.7.3）。

  1. <article class="about">
  2.      <h1>Antoni Gaudí</h1>
  3.  
  4.      <p>Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture.</p>
  5.      <p>Barcelona <a href="http://www.gaudi2002.bcn.es/english/" rel="external">celebrated the 150th anniversary</a> of Gaudí's birth in 2002.</p>
  6.  
  7.      <section class="project">
  8.         <h2 lang="es">La Casa Milà</h2>
  9.         <p>Gaudí's work was essentially useful. <span lang="es">La Casa Milà</span> is an apartment building and <em>real people</em> live there.</p>
  10.      </section>
  11.  
  12.      <section class="work">
  13.         <h2 lang="es">La Sagrada Família</h2>
  14.         <p>The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is the <em>most visited</em> building in Barcelona.</p>
  15.      </section>
  16. </article>

图9.7.1　出于演示的目的，将第二个section元素的class值由project改成了work

  1. section[class] {
  2.      color: red;
  3. }

图9.7.2　 方括号包围目标属性和目标属性值。这个例子中没有属性值，它选择的是所有具有class属性的section

9.7　按属性选择元素 - 图1

图9.7.3　每个包含class属性的section元素（无论其class值是什么）都显示为红色

按属性选择要格式化的元素的步骤

  • 输入element，这里的element是要考察其属性的元素的选择器。

  • 输入[attribute，这里的attribute是选择元素需要考察的属性的名称。

  • 输入="value"，表示属性值等于这里的value的元素将被选中。或者输入～="value"，表示属性值包含这里的value的元素将被选中（属性值还可以包含其他内容，不同的属性值之间用空格分隔）。它必须匹配完整的单词，而不是单词的一部分。或者输入|="value"（前面是管道符号，而不是数字1或小写字母l），表示属性值等于这里的value或以value开头（即你输入的值后面加上连字符）的元素将被选中。（这常常用以搜索包含lang属性的元素。）

或者输入^="value"，表明属性值以这里的value开头（作为完整的单词，或单词的一部分）的元素将被选中（这是CSS3中新增的特性，参见本节提示）。

或者输入$="value"，表明属性值以这里的value结尾（作为完整的单词，或单词的一部分）的元素将被选中（这是CSS3中新增的特性，参见本节提示）。

或者输入*="value"，表明属性值至少包含这里的value一次的元素将被选中。也就是说，value不必是属性值中的完整单词（这是CSS3中新增的特性，参见本节提示）。

  • 输入]。

提示　当前所有主流浏览器（包括IE7）均支持按元素包含的属性（和属性值）选择元素。对于第3步中提到的CSS3中新增的属性选择器，IE7和IE8有一些异常。更多信息参见http://reference.sitepoint.com/css/css3attribute-selectors。

更多属性选择器示例

属性选择器非常强大。这里给出更多的例子，演示属性选择器几种不同的使用方式。这些例子在实践中也用得上。

  • 这个选择器选择任何rel属性值等于external（必须完全匹配）的a元素。
  1. a[rel="external"] {
  2.   color: red;
  3. }
  • 假设某section元素有两个类，如
    ，另一个section有一个类，如
    。～=语法可以测试单词的部分匹配，即匹配出现在以空格相隔的单词列表中的完整的单词。在这个例子中，两个元素都将显示为红色。
  1. section[class ～ ="barcelona"] {
  2.  color: red;
  3. }
  4.  
  5. / 这个选择器也能匹配，因为这个选择器匹配部分字符串（不需要完整的单词） /
  6.  
  7. section[class="barc"] {
  8.  color: red;
  9. }
  11. / 这个选择器无法匹配，因为barc 并不是空格分隔的列表中的某个完整单词 /
  13. section[class ～ ="barc"] {
  14.  color: red;
  15. }
  • 这个选择器选择任何带有lang属性且属性值以es开头的h2。在HTML代码示例（参见图9.7.1）中有两个这样的实例。
  1. h2[lang|="es"] {
  2.  color: red;
  3. }
  • 通过使用通用选择器，这个选择器选择任何带有lang属性且属性值以es开头的元素。在HTML代码示例（参见图9.7.1）中有三个这样的实例。
  1. [lang|="es"] {
  2.  color: red;
  3. }
  • 通过联合使用多种方法，这个选择器选择所有既有任意href属性，又有任意属性值包含单词howdy的title属性的a元素。
  1. a[href][title～="howdy"] {
  2.  color: red;
  3. }
  • 作为上一选择器的精确度低一些的变体，这个选择器选择所有既有任意href属性，又有任意属性值包含how（作为完整的单词或单词的一部分，它匹配how、howdy、show等，无论how出现在属性值的什么位置）的title属性的a元素。
  1. a[href][title*="how"] {
  2.  color: red;
  3. }
  • 这个选择器匹配任何href属性值以http://开头的a元素。
  1. a[href^="http://&#34;] {
  2.  color: orange;
  3. }
  • 这个选择器匹配任何src属性值完全等于logo.png的img元素。
  1. img[src="logo.png"] {
  2.  border: 1px solid green;
  3. }
  • 这个选择器的精确度比前一个低一些，它匹配任何src属性值以.png结尾的img元素。
  1. img[src$=".png"] {
  2.  border: 1px solid green;
  3. }

这些例子并不代表你能实现的所有效果，不过，希望它们可以激发你继续探索。