本文简单全面地介绍CSS中的各种类型的选择符。包括 上下文选择符、ID和类选择符、属性选择符、伪类、伪元素等。

转载自：http://anytimekaka.github.io/archivers/css-selector-position

上下文选择符

一般上下文选择符：

article h1 em {color:green;}
//选中的em 必须有一个祖先是h1，后者进而还要有一个祖先是article

子选择符：label1>lalel2。label1必须是label2的父元素，不能是其他的上级元素。

一般同胞选择符：label1~label2，label2必须跟在同胞标签label1的后面，不一定紧跟。

紧邻同胞选择符：label1+label2，label2必须紧跟label1的后面。

通用选择符：使用*作为通配符，匹配任何元素。

* {color:green;}
//可以匹配所有元素，color为前景色

ID和类选择符

id和类选择符在使用时，不需要考虑html文档的层次结构，只要再标签中添加id和class属性，body标签中的任何元素都可以添加这两个属性。

类选择符：

.specialtext {font-style:italic;}
//对于带specicaltext类的标签内内容有效
p.specialtext span {font-weight:blod;}
//对于处于带有specialtext类的<p>标签内的span标签有效
<p class="specialtext">  <span>content</span>    </p>

多类选择符：

//对同时存在这两个类名的元素产生作用
.specialtext.featured {font-size:120%;}
//两个类名直接不能有空格，如果加了空格，就变成了“上下文”选择符了！
<p class="specialtext featured">  content </p>

ID选择符：与类选择符基本一样

#specialtext {CSS样式声明;}
<p id="specialtext "> content </p>

id与class的区别：id可用于页面内导航。

<a href="#bio">Biography</a>带有#的链接表示此链接是导航链接，如果没有#，浏览器默认加载bio目录下的默认页面。如果只有一个#，表示返回页面顶部。另外，如果暂时不知道一个href应该设置什么URL，应该以#作为占位符。

什么时候用id，什么时候用class

id可以唯一标识一个元素，所以，当需要标识页面的一个唯一独立的部分时，可以使用id，例如页面导航栏等。

class通常用于表示一类元素，例如一个页面有多个按钮，可以为这些按钮设置一样的样式。

属性选择符

属性名选择符：标签名[属性名]

img[title] {border:2px solid blue;}
<img src="" title="flower" alt="flower"/>
//带有title的img元素会显示2像素宽的蓝色边框，title属性是什么值无所谓，只要有title这个属性

属性值选择符：标签名[属性名=属性值]。与属性名选择符基本类似，只是为属性名添加了特定的值限制。

img[title="flower"] {border:2px solid blue;}
<img src="" title="flower" alt="flower"/>
//title="flower"的img元素会显示2像素宽的蓝色边框

前面介绍的都是针对具体的HTML元素定义的css样式，例如根据标签名、类名、ID、属性值来确定展示的样式。但是在某些动作发生时，例如获得鼠标焦点，这一类事件发生时对样式的影响。这就是我们即将讨论的伪类了。

伪类

从字面意义上，我们可以以为伪类与前面说的类相似，但是实际上是有本质区别的。

伪类有两种：

  • UI伪类：会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式
  • 结构化伪类：当标记中存在某种结构关系时，为相应元素应用CSS样式

UI伪类

链接伪类

最常使用UI伪类的元素是链接，利用UI伪类，链接可以在用户鼠标悬停时改变文本颜色，或者去掉文本的下划线等。

a:link {color:black;}    //链接的展示情况
a:visited {color:orange;}    //访问过的链接
a:hover {text-decoration: none;}    //鼠标悬停（不显示下划线）
a:active {color: red;}    //链接正在被点击
//由于这四个伪类的特指度相同，如果不按照上面的顺序使用，浏览器可能不会正常显示。

有些伪类可以用于任何元素，而不仅仅是链接，例如hover：

p:hover {background-color:gray;}

:focus（焦点）伪类

input:focus {border: 3px solid blue;}

当input元素获得焦点，光标位于input元素上时，添加一个蓝色的边框。可以让用户明确地知道当前的光标焦点。

:target（目标）伪类

如果用户点击一个指向页面中其它元素的链接，则那个元素就是目标（target），可以使用target伪类选中它。例如如下html代码：

<a href="#moreinfo">Get more information? Click here!</a>
<p id="moreinfo">Some detail info will be shown here.</p>

就可以使用CSS规则进行修饰：

#moreinfo:target {background-color: #eee;}

当用户单击链接转向ID为moreinfo的元素时，为该元素添加浅灰色背景。维基百科在引用中大量使用了:target伪类。

结构化伪类

结构化伪类可以根据标记的结构应用样式，比如根据元素的父元素或前面的同胞元素是什么。

:first-child和:last-child

:first-child表示一组同胞元素中的第一个元素，last-child是最后一个

ol.result li:first-child {color:blue;}

<ol class="result">
    <li>My fast pony</li>    //选中，蓝色
    <li>My fast pony</li>
    <li>My fast pony</li>
</ol>

:nth-child(n)

n表示一个数值（odd、even）。例如li:nth-child(2)会选中列表中的第二项。此伪类常用于提高表格的可读性。

伪元素

伪元素是文档中若有实无的元素。

p::first-letter {font-size: 300%;}       //段落的首字母放大三倍
p::first-line {font-variant:small-caps;}    //把第一行以小型大写字母显示
p.age::before {content: "Age: ";}
p.age::after {content:" years";}

<p class="age">25</p>    //显示：Age: 25 years

选择符总结

理解选择符是学习CSS的基础，现在的网站开发基本不会将样式写在HTML文档中，都是独立出CSS静态文件。而且选择符也使得管理样式更加简单。

常用的选择符主要有这些：上下文选择符，ID和类选中符，伪类中的几个，伪元素使用比较少。