CSS 选择符

    选择符，顾名思义，用于从XHTML文档中选择元素。选择符有很多种，各有其不同的具体性（specificity），可以确定一大批元素或者仅仅几个元素。具体性是度量选择符的作用范围的手段。所谓作用范围，换句话说，指定是选择符选择了多少元素。在CSS的设计原则中，比较具体的选择符将凌驾于较不具体的选择符之上并取而代之。具体性是CSS中较为含糊和你难以掌握的概念之一，但也是这种语言中最强大的特性之一。接下来介绍一下选择符：

 

 

1    全体选择符

    全体选择符（universal）是一个星号（*）。它充当一个“通配符”，选择文档中的每一个元素。示例，下列规则将把蓝色前景色应用到所有元素上：

    *{ color: blue; }

标题、段落、列表、表格单元格甚至链接都将呈现为蓝色，因为这一全体选择符选择了所有元素。这是最不具体的选择符，因为它完全缺乏具体性。

 

2、元素选择符

    元素选择符选择一种元素的所有实例，其具体性来自于标签名。这中选择符比全体选择符更具体，但还不是很具体，因为其目标是一种元素的每一个实例，无论他们到底有多少个。示例，下列将每一个p元素的前景色指定为红色：

    p{ color: red; }

元素选择符也叫类型（type）选择符。

 

3、类选择符

    类选择符以class属性中有指定类名的任何元素为目标。因为class属于几乎可用于XHTML中的任何元素，而已可以有任意数据的元素属于同一个类，所以这种选择符不是特别具体，但还是比元素选择符更具体。在CSS中，类选择符以一个圆点(.)开头。示例，下列规则将影响所有属于“info”类的元素的样式：

.info { color:purple; }

 

4、ID选择符

   ID选择符将仅仅选择具有指定标识符的那个元素。实际上，ID属性可用于几乎所有元素，但一个ID属性值在一个文档中只能使用一次。ID选择符在一个页面中只以一个元素为目标，这使它比可能以很多元素为目标的类选择符具体很多。ID选择符以一个“#”符号开头。示例，下列的规则将会将ID值为introduction的元素的前景色指定为绿色：

   #introduction {color: green}

 

5、伪类选择符

    伪类选择符类似于类选择符，但其选择的处于特定状态的元素。这种选择符符以冒号“:”开头。可用的伪类只有有限几个：

   :link { color: blue; }

   :visited { color: purple; }

   :active { color: red; }

   :hover { color: green; }

   :focus { color:orange; }

   :link伪类选择所有超链接元素； :visited伪类选择那些所指向的目标已经被访问过的链接；:active伪类选择处于活动状态的链接，所谓处于活动状态，指定是在被激活期间；:hover伪类选择用户的定点设为“悬浮”于其上方的元素，虽然任何元素都能处于有定点设备悬浮其上的状态，但是这一伪类最常用语链接；:focus伪类选择拥有焦点的元素。

   除此之外还静态伪类。

   div:first-child 获取所有身为第一个子元素的DIV；

   div:last-child  获取所有身为最后一个字元素的DIV；

   div:only-child  获取所有身为唯一子元素的DIV；

   div#containerp:first-of-type 获取ID值为“container”的DIV元素的后代，而其必须是第一个P类型子元素；

   p:last-of-type  获取所有身为最后一个P类型的子元素；

   p:only-of-type  获取所有身为唯一P类型子元素的元素；

   p:nth-of-type(7)获取为第7个P类型子元素的元素；

   div:empty  获取完全空的DIV元素（包括文本节点）；

   div:not([id=container])获取所有ID属性值不同“container”的DIV元素；

   div:nth-child(3) 获取为第三个子元素的DIV元素；

   div:nth-child(odd)获取所有DIV元素集中序数为奇数的元素；

   div:nth-child(event)获取所有DIV元素集中序数为偶数的元素；

   div:nth-child(5n+3)从第三个DIV子元素开始，获取所有DIV元素序数为（5n+3）的元素；

   th:nth-last-of-type(-n+3)获取任何表格的最后三行；

   td:nth-last-child(n+1)除最后一列外，获取表格的所有单元格；

   input:enabled 获取所有可用的INPUT元素；

   input:disabled 获取所有禁用的INPUT元素；

   input:checed 获取所有选择的INPUT元素；

 

6、后代选择符

    后代选择符是CSS的武符库中最有用和最强大的选择符之一。它可以组装自两个或多个用空格分隔的基本类型的选择符（全体、元素、类、伪类和ID选择符），用于选择文档树中匹配该位置的元素。这种选择符也被称为上下文选择符（contextual selector），因为它们是善于元素在文档中的上下文来选择它们。示例：

#introduction em{ color: yellow; }

这一规则把ID值为“introduction”的元素中包含任何em元素的颜色设置为黄色。

 

7、组合选择符

可以把两种或者多种类型的选择符组合式使用，这些组合能够进一步增强选择符的具体性。示例：

p.info { color:blue; }

它只选择属于info类的段落，属于该类的别种元素和不属于info类的其他段落将被忽略。

 

8、分组选择符

可以把几个选择符聚集其他作为一条规则的组合部分，以便同一套唐诗声明集能够应用到许多元素上，这样可以避免对这些选择符重复同一套样式声明。示例：

p, h1, h2 {color: blue; }

这一规则将同样的颜色值应用到p、 h1、h2元素的每一个实例。

分组选择符和组合选择符是保证样式表简介性和可管理性的有效手段。

 

9、高级选择符

  9.1、属性选择符（attribute selector）

     其以具有特定属性甚至是具有其值为指定值得特定属性的元素目标。

     div[id] 获取所有拥有id属性的DIV元素；

     div[id=container] 获取所有ID属性值为“container”的DIV元素；

     input[type=text][value=Yes] 获取所有type属性为“text”和value属性值为“Yes”的INPUT元素；

     div[id^=empt] 获取所有ID属性值以“empt”开头的DIV元素；

     div[id$=parent] 获取所有ID属性值以“parent”结尾的DIV元素；

     div[id*=mpt] 获取所有ID属性值包含“mpt”字符串的DIV元素；

     div[class~=bar] 获取所有class属性值是一个一个空格分割的列表，且其中之一为“bar”的DIV元素；

     div[lang|=zh] 获取所有lang属性是一个以连字符分隔的列表，且以“zh”开头的DIV元素；

  9.2、伪元素选择符（pseudo element selector）

     其目标并不明确存在于标记代码中，而是隐含于其结构之中。如段落的首行，紧随一个元素之后的另一个元素。

     ::first-line 定义段落的第一行；

     ::first-letter 定义段落的第一个字符；

     ::before 在元素的开始动态的插入内如；

     ::after 在元素的结尾动态的插入内容；

     ::selection 改变用户鼠标选择的内容样式；

  9.3、子选择符（child selector）

     其选择一个元素的子元素，但不选择器他后代元素。

     div > p

     获取所有是DIV元素直属后代的Ｐ元素

  9.4、毗邻同胞选择符（adjacent sibling selector）

     其目标是一个元素的同胞元素中紧随其后的那个。

　　　div + p 获取所有直属前去兄弟是DIV元素的P元素；

      div ~ p 获取所有是DIV元素后继兄弟的P元素（不一定直属）；