CSS选择符总结

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

个人博客原文连接：anytimekaka.github.io/archivers/c…

上下文选择符

通常上下文选择符：

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和类选中符，伪类中的几个，伪元素使用比较少。全部的选择符能够参考这里stylinwithcss