css3 定义选择器

　　引言：CSS样式规则有两个主要部分。选择器决定将格式化应用到哪些元素。声明则定义要应用的格式化。

• 构造选择器

选择器可以定义五个不同的标准来选择要进行格式化的元素。

1. 元素的类型或者名称。如下所示。

   h1{
        color:red;
   }

2. 元素所在的上下文。如下所示。

   h1 em{
      color:red;
   }

3. 元素的类或ID。如下所示。

   /*类选择器*/
   .error{
       color:red;
   }
   /*ID 选择器*/
   #gaudi{
      color:red;
   }

4. 元素的伪类或伪元素。如下所示。

   a:link{
      color:red;
   }

5. 元素是否有某些属性和值。如下所示。

   a[title]{
      color:red
   }

• 按名称选择元素

选择要格式化的元素，最常见的标准可能是元素的名称。如下所示：

h2{
  color:red;
}

按照类型选择要格式化的元素 　　

1. 输入selector,其中selector是目标元素的类型名称。
2. 输入{。
3. 输入希望应用到选中元素的样式，用属性：值得形式表示。
4. 输入}结束样式规则。

• 按类或ID选择元素

元素中标识了class或id，可以在选择器中使用这个标准，从而支队已标识的元素进行格式化。推荐使用类选择器。如下所示：

/*类选择器*/
.error{
    color:red;
}
/*ID 选择器*/
#gaudi{
   color:red;
}

　　　　按类选择要格式化的元素

1. 输入.（点号）。
2. 不加空格，直接输入classname.

3. 输入{。

4. 输入希望应用到选中元素的样式，用属性：值得形式表示。

5. 输入}结束样式规则。

按id选择要格式化的元素

1. 输入#（井号）。
2. 不加空格，直接输入id。
3. 输入{。
4. 输入希望应用到选中元素的样式，用属性：值得形式表示。
5. 输入}结束样式规则。

• 按上下文选择元素

根据元素的祖先、父元素或同胞元素来定位需要格式化的元素。

祖先（ancestor）是包含目标（后代，descendant）元素的任何元素，不管它们之间隔了多少代。

按祖先元素选择要格式化的元素

1. 输入希望格式化的元素的祖先元素的选择器。
2. 输入一个空格。
3. 如果需要，对后续的每个祖先元素重复以上两步。
4. 输入希望格式化的元素的选择器。

   .architect p{
     color:red;
   }

按父元素选择要格式化的元素

1. 输入希望格式化的元素的父元素的选择器。
2. 输入>（大于号）。
3. 如果需要，对后续每代父元素重复以上两步。
4. 输入希望格式化的元素的选择器。

   .architect>p{
      color:red;
   }

按相邻同胞元素选择要格式化的元素

1. 输入包含在同一父元素中的、直接出现在目标元素前面的元素选择器。
2. 输入+（加号）。
3. 如果需要，对每个后续的同胞元素重复以上两步。
4. 输入要格式化的元素的选择器。

   .architect p+p{
     color:red;
   }

• 选择第一个或者最后一个子元素

有时需要选择仅作为某元素第一个或最后一个子元素的元素。需要使用伪类:firsh-child和:last-child。如下：

li:frist-child{
  color:red;
}

li:last-child{
  color:red;
}

选择某元素的第一个或者最后一个子元素进行格式化

1. 输入代表我们想应用样式的第一个或者最后一个子元素。
2. 选择第一个子元素输入:first-child。最后一个子元素输入:last-child。

• 选择元素的第一个字母或者第一行

分别使用:first-letter和:first-line伪元素只选择元素的第一个字母或第一行。如下：

P:first-letter{
  color:red;
  font-size:1.4em;
  font-weight:bold;
}

p:first-line{
  color:red;
}

选择元素的第一个字母

1. 输入要对其格式化的元素选择器。
2. 输入:first-letter。　

选择元素的第一行

1. 输入要对其第一行进行格式化的元素的选择器。
2. 输入:first-line。　

• 按状态选择链接元素

CSS允许根据链接的当前状态对他们进行格式化。

按状态选择要格式化的链接元素的步骤

1. 输入a（a是链接元素的名称）。
2. 输入：（冒号），前后都没有空格。
3. 完成第2步后，执行下列操作影响链接状态。
4. 输入link以设置从未被激活或指向，当前页没有被激活或指向的链接的外观。
5. 输入visited以设置访问者已激活过链接的外观。
6. 输入focus，前提是链接是通过键盘选择并已准备好激活的。
7. 输入hover以设置光标指向链接时链接的外观。
8. 输入active以设置激活过的链接的外观。

   /*未访问过*/
   a:link{
     color:red;
   }
   /*访问过的链接*/
   a:visited{
     color:orange;
   }
   /*链接获取焦点*/
   a:focus{
     color:purple;
   }
   /*光标停留在连接上*/
   a:hover{
     color:green;
   }
   /*激活链接时*/
   a:active{
     color:blue;
   }

   一定要按照以下的顺序定义规则：link、visited、focus、hover、active（缩写为LVFHA）。

• 按属性选择元素

对给定属性或属性值的元素进行格式化。例如：

p[class]{
  color:red;
}

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

1. 输入要考察其属性的元素的选择器。
2. 输入[。
3. 输入选择元素需要考察的属性的名称。
4. 根据需要输入属性的匹配符号和匹配值。
5. 输入。如果想要为元素指定其他属性或者属性值。重复2-4步骤。

属性选择器参考表

选择器	属性值
[attribute]	匹配指定属性，不论具体指是什么。
[attribute="value"]	完全匹配指定属性值。
[attribute~="value"]	属性值是以空格分隔的多个单词，其中有一个完全匹配指定值。
[attribute|="value"]	属性值以value-打头。
[attribute^="value"]	属性值以value开头，value为完成的单词或单词的一部分。
[attribute$="value"]	属性值以value结尾，value为完整的单词或单词的一部分。
[attribute*="value"]	属性值为指定值的子字符串。

/*选择rel属性值等于external的a元素*/
a[rel="external"]{
  color:red;
}

/*配置以空格相隔的多个单词中的一个*/
article[class~="barcelona"]{
  color:red;
}

/*这个选择器也能匹配，因为这个选择器匹配部分字符串*/
article[class*="barcelona"]{
  color:red;
}

/*选择任何带有lang属性且属性值以es开头的h2*/
h2[lang|="es"]{
  color:red;
}

/*选择任何带有lang属性且属性值以es开头的元素*/
*[lang|="es"]{
  color:red;
}

/*选择既有href属性，又有任意是属性值包含单词howdy的title属性的a元素*/
a[href][title~="howdy"]{
  color:red;
}

/*选择既有href属性，又有任意属性值包含how的title属性的a元素*/
a[href][title*="how"]{
  color:red;
}

/*匹配href属性值以http://开头的a元素*/
a[href^="http://"]{
  color:red;
}

/*匹配任何src属性值完全等于logo.png的img元素*/
img[src="logo.png"]{
  border:1px solid green;
}

/*匹配任何src属性值以.png结尾的img元素*/
img[src$=".png"]{
  border:1px solid green;
}

• 指定元素组

对于使用相同样式规则的多个元素，可以使用元素组设置样式规则。

将样式应用于元素组的步骤

1. 输入第一个元素名称。
2. 输入，（逗号）。
3. 输入第二个元素名称。
4. 对其他元素重复第二和第三步。

   h1,
   h2{
     color:red;
   }

• 组合使用选择器

现实中常常需要组合使用以上技术，才能找到要格式化的元素。如：

/*选择em元素，包含在p元素中，这样的p元素是lang属性值以es开头的h2元素的直接相邻同胞元素，且class等于project的任何元素的子元素*/
.project h2[lang|="es"]+p em{
  color:red;
}