CSS3 - 选择器
2016-12-16 本文已影响68人
liuxuan
一、 前言
CSS3的理念就是模块化，其中最重要的模块有：
- 选择器
- 框模型
- 背景和边框
- 文本效果
- 2D/3D转换
- 动画
- 多列布局
- 用户界面
今天，我们要讨论的就是其中的选择器这个模块。
用好选择器可以大幅度提升WEB开发人员在书写和修改样式表时的工作效率。大多数情况下我们要对样式表进行修改时都会使用class或者id属性，而这些属性是没有任何语义的，仅仅只是用来为css样式服务，属于多余属性。当这些没有语义的属性充斥在整个html结构中时，是非常混乱的，对于我们自身修改也很不方便。
在CSS3中，提倡使用选择器将样式和元素直接绑定起来，这样在样式表中什么样式与什么元素相匹配变的一目了然，修改起来也方便。
不仅如此，通过选择器还可以实现各种复杂的指定，同时也能大量减少样式表代码的书写量，最终书写出来的样式表也会变得简洁明了。
下面，让我们进入CSS3选择器的世界。
二、 选择器分类
CSS3的选择器总体上可以分为4类：
- 属性选择器
- 结构伪类选择器
- UI伪类选择器
- 其他选择器
每一类选择器所承担的主要职责都是不一样的，在正文中我会对它们做详细的介绍。
三、 正文
1、 属性选择器
- markdown表格中 ‘ | ’ 用 ‘ / ’ 代替，否则会引起表格混乱，如果大家有解决办法，请留言告知
- 正确的举例用 ' Y ' 表示
- 错误的举例用 ‘ N ’ 表示
注意，当省略E选择符的时候，代表匹配任意元素。
| 属性选择器 | 作用 | 举例 |
|---|---|---|
| E[foo] | 选择匹配E的元素，且该元素定义了foo属性 | <div foo="xx"> |
| E[foo="bar"] | 选择匹配E的元素，且该元素定义了foo属性值为"bar" | <div foo="bar"> Y <div foo="ba"> N |
| E[foo~="bar"] | 选择匹配E的元素，且该元素定义了foo属性，foo属性值是一个以空格符分隔的列表 | <div foo="bar"> Y <div foo="me bar"> Y <div foo="bar-me"> N |
| E[foo/="en"] | 选择匹配E的元素，且该元素定义了foo属性，foo属性值是一个以连字符( - )分隔的列表 | <div foo="en"> Y <div foo="en-cn"> Y <div foo="en cn"> N |
| E[foo^="bar"] | 选择匹配E的元素，且该元素定义了foo属性，foo属性值必须以"bar"作为开头 | <div foo="bar"> Y <div foo="barq"> Y <div foo="bar q"> Y <div foo="bar-q"> Y <div foo="qbar"> N |
| E[foo$="jpg"] | 选择匹配E的元素，且该元素定义了foo属性，foo属性值必须以"jpg"作为结尾 | <div foo="jpg"> Y <div foo="ajpg"> Y <div foo="a-jpg"> Y <div foo="jpe"> N |
| E[foo*="bar"] | 选择匹配E的元素，且该元素定义了foo属性，foo属性值在任意位置包含"bar"字符串即可 | <div foo="bar"> Y <div foo="aabar"> Y <div foo="abarz"> Y <div foo="aa-bar"> Y <div foo="barqq"> Y <div foo="bar aa"> Y <div foo="zbaar"> N |
2、 结构伪类选择器
| 结构伪类选择器 | 作用 | 举例 |
|---|---|---|
| E:root | 匹配E所在文档的根元素，在html文档中，根元素就是html元素 | <html></html> |
| E:nth-child(n) | 选择所有在其父元素中第n个位置的匹配E的子元素， 参数n可以是数字(1、2、 3)、关键字(odd、even)和公式(2n、2n+3)， 公式n的起始值是0，数字n的起始值是1 |
………… |
| E:nth-last-child(n) | 选择所有在其父元素中倒数第n个位置的匹配E的子元素， 该选择器与E:nth-child(n) 是计算相反顺序额选择器，语法和用法相同 |
………… |
| E:nth-of-type(n) | 选择所有在其父元素中同类型第n个位置的匹配E的子元素， 注意，所有匹配E的子元素被分离出来单独排序，非E子元素不参与排序， 参数n可以是数字(1、2、 3)、关键字(odd、even)和公式(2n、2n+3)， 公式n的起始值是0，数字n的起始值是1 |
………… |
| E:nth-last-of-type(n) | 选择所有在其父元素中同类型倒数第n个位置的匹配E的子元素， 该选择器与E:nth-of-type(n)是计算顺序相反的选择器，语法和用法相同 |
………… |
| E:first-child | 选择位于其父元素中第一个位置，且匹配E的子元素 | ………… |
| E:last-child | 选择位于其父元素中最后一个位置，且匹配E的子元素 | ………… |
| E:only-child | 选择其父元素只包含一个子元素，且该子元素匹配E | ………… |
| E:first-of-type | 选择在其父元素中匹配E的第一个同类型的子元素 | ………… |
| E:last-of-type | 选择在其父元素中匹配E的最后一个同类型的子元素 | ………… |
| E:only-of-type | 选择在其父元素只包含一个同类型子元素，且该子元素匹配E | ………… |
| E:first-letter | 选择每个E元素的首字母 | ………… |
| E:first-line | 选择每个E元素的第一行 | ………… |
| E:before | 在每个E元素的内容之前插入内容 | ………… |
| E:after | 在每个E元素内容之后插入内容 | ………… |
| E:empty | 选择匹配E的元素，且该元素不包含节点， 注意，文本也属于节点 |
………… |
3、 UI伪类选择器
| UI伪类选择器 | 作用 | 举例 |
|---|---|---|
| a:link | 选择所有未被访问的a链接 | ………… |
| a:visited | 选择所有已经被访问的a链接 | ………… |
| a:active | 选择活动链接(即鼠标点下去没有松开的时候) | ………… |
| a:hover | 选择鼠标指针位于其上的a链接 | ………… |
| E:focus | 选择获得焦点的E元素(所有用户可以输入的元素都有焦点) | ………… |
| E:enabled | 选择可以输入的E元素(所有用户可以输入的元素都有enable属性) | ………… |
| E:disabled | 选择禁止输入的E元素(所有用户可以输入的元素都有disabled属性) | ………… |
| input:checked | 选择radio和checkbox中被选中的input元素(只有rhttp://www.w3school.com.cn/cssref/css_selectors.aspadio和checkbox有该选择器) | …………… |
4、 其他伪类选择器
| 其他伪类选择器 | 作用 | 举例 |
|---|---|---|
| E:not(s) | 否定伪类选择器类型，选择匹配E的所有元素，并且过滤掉匹配s选择符的所有元素 | ………… |
| E::selection | 匹配用户选择的E元素 | ………… |
| E:target | 目标伪类选择器类型，选择匹配E的所有元素，且匹配元素被相关URL指向 | ………… |
四、 结束语
本文对CSS3选择器模块进行了分类梳理，因为比较简单，所以并没有写例子来验证，大家只要多多练习，一定可以熟练的掌握好这些选择器，提升我们的编写CSS样式的水平，真正做到结构、样式以及行为三者分离。
最后，附上W3C选择器模块详细介绍，大家可以去上面多多练习。
http://www.w3school.com.cn/cssref/css_selectors.asp
