css3 定义选择器
引言：CSS样式规则有两个主要部分。选择器决定将格式化应用到哪些元素。声明则定义要应用的格式化。
- 构造选择器
选择器可以定义五个不同的标准来选择要进行格式化的元素。
- 元素的类型或者名称。如下所示。
h1{ color:red; }
- 元素所在的上下文。如下所示。
h1 em{ color:red; }
- 元素的类或ID。如下所示。
/*类选择器*/ .error{ color:red; } /*ID 选择器*/ #gaudi{ color:red; }
- 元素的伪类或伪元素。如下所示。
a:link{ color:red; }
- 元素是否有某些属性和值。如下所示。
a[title]{ color:red }
- 按名称选择元素
选择要格式化的元素，最常见的标准可能是元素的名称。如下所示：
h2{ color:red; }
按照类型选择要格式化的元素
- 输入selector,其中selector是目标元素的类型名称。
- 输入{。
- 输入希望应用到选中元素的样式，用属性：值得形式表示。
- 输入}结束样式规则。
- 按类或ID选择元素
元素中标识了class或id，可以在选择器中使用这个标准，从而支队已标识的元素进行格式化。推荐使用类选择器。如下所示：
/*类选择器*/ .error{ color:red; } /*ID 选择器*/ #gaudi{ color:red; }
按类选择要格式化的元素
- 输入.（点号）。
- 不加空格，直接输入classname.
-
输入{。
-
输入希望应用到选中元素的样式，用属性：值得形式表示。
-
输入}结束样式规则。
按id选择要格式化的元素
- 输入#（井号）。
- 不加空格，直接输入id。
- 输入{。
- 输入希望应用到选中元素的样式，用属性：值得形式表示。
- 输入}结束样式规则。
- 按上下文选择元素
根据元素的祖先、父元素或同胞元素来定位需要格式化的元素。
祖先（ancestor）是包含目标（后代，descendant）元素的任何元素，不管它们之间隔了多少代。
按祖先元素选择要格式化的元素
- 输入希望格式化的元素的祖先元素的选择器。
- 输入一个空格。
- 如果需要，对后续的每个祖先元素重复以上两步。
- 输入希望格式化的元素的选择器。
.architect p{ color:red; }
按父元素选择要格式化的元素
- 输入希望格式化的元素的父元素的选择器。
- 输入>（大于号）。
- 如果需要，对后续每代父元素重复以上两步。
- 输入希望格式化的元素的选择器。
.architect>p{ color:red; }
按相邻同胞元素选择要格式化的元素
- 输入包含在同一父元素中的、直接出现在目标元素前面的元素选择器。
- 输入+（加号）。
- 如果需要，对每个后续的同胞元素重复以上两步。
- 输入要格式化的元素的选择器。
.architect p+p{ color:red; }
- 选择第一个或者最后一个子元素
有时需要选择仅作为某元素第一个或最后一个子元素的元素。需要使用伪类:firsh-child和:last-child。如下：
li:frist-child{ color:red; } li:last-child{ color:red; }
选择某元素的第一个或者最后一个子元素进行格式化
- 输入代表我们想应用样式的第一个或者最后一个子元素。
- 选择第一个子元素输入: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; }
选择元素的第一个字母
- 输入要对其格式化的元素选择器。
- 输入:first-letter。
选择元素的第一行
- 输入要对其第一行进行格式化的元素的选择器。
- 输入:first-line。
- 按状态选择链接元素
CSS允许根据链接的当前状态对他们进行格式化。
按状态选择要格式化的链接元素的步骤
- 输入a（a是链接元素的名称）。
- 输入：（冒号），前后都没有空格。
- 完成第2步后，执行下列操作影响链接状态。
- 输入link以设置从未被激活或指向，当前页没有被激活或指向的链接的外观。
- 输入visited以设置访问者已激活过链接的外观。
- 输入focus，前提是链接是通过键盘选择并已准备好激活的。
- 输入hover以设置光标指向链接时链接的外观。
- 输入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; }
按属性选择要格式化的元素
- 输入要考察其属性的元素的选择器。
- 输入[。
- 输入选择元素需要考察的属性的名称。
- 根据需要输入属性的匹配符号和匹配值。
- 输入。如果想要为元素指定其他属性或者属性值。重复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; }
- 指定元素组
对于使用相同样式规则的多个元素，可以使用元素组设置样式规则。
将样式应用于元素组的步骤
- 输入第一个元素名称。
- 输入，（逗号）。
- 输入第二个元素名称。
- 对其他元素重复第二和第三步。
h1, h2{ color:red; }
- 组合使用选择器
现实中常常需要组合使用以上技术，才能找到要格式化的元素。如：
/*选择em元素，包含在p元素中，这样的p元素是lang属性值以es开头的h2元素的直接相邻同胞元素，且class等于project的任何元素的子元素*/ .project h2[lang|="es"]+p em{ color:red; }
