细说CSS选择器

细说CSS的选择器

网站数据庞大而繁杂，所以使用结构化标记更有利于网站数据的维护，同时也可减轻程序员的工作量。而CSS，可以将结构化标记与丰富多彩的页面表现结合起来，是一种非常好用的解决方法。
与HTML相比，CSS支持更丰富的文档外凤，其表现程度也远非HTML力所能及。CSS可以为任何元素的文本和背景设置颜色；允许在任何元素外围创建边框，同时能增大或减少元素外的空间；允许改变文本的大小写、装饰方式（如下划线）、间隔，甚至可以确定是否显示文本；还允许完成许多其他的效果。

1. 基本选择器

a. 元素选择器:或者叫做类型选择器，根据元素标签的名称进行匹配。

语法举例：h1 {color:lightblue;}

b. 类选择器:根据元素 class 属性进行匹配,类选择器可以同时定义多少元素。

语法举例：.title {font-size:20px;}

c. ID选择器:根据元素 id 属性进行匹配。因为元素的ID属性具有唯一性，帮ID选择器也具有唯一性。

语法举例：#content{font-size:13px;}

d. 通配选择器

语法举例： * {color:red;}

注意：不建议使用通配选择器，因为它会作用于文档中所有的元素。

e. 属性选择器：根据元素的属性进行匹配,即某某标签里的某某属性。

语法举例：img[alt] {margin:10px;}
input[type=”txet”]{border:2px solid #000;}

2. 组合选择器：或者叫做上下文选择器，通俗的说是具有祖,父,子,兄弟等类似于家族层级关系的选择器，包含以下四种选择器。

a. 后代选择器：将会定义所有符合条件的的后代元素,包括儿子,孙子,孙子的孙子…

语法举例：div p {background-color:lightblue;}

b. 子选择器:只能定义子元素,而不能定义孙辈元素。

语法举例：div > h2 {color:yellow;}

c. 相邻选择器：定义拥有共同父级并且相邻的元素,紧挨着所选元素之后的第一个元素才会有效果，第二个元素往后的元素及所选元素之前的元素就没有效果。

语法举例：h3 + p {color:black;}

d. 兄弟选择器:定义拥有共同父级的后续所有元素。

语法举例：h3 ~ p {color:white;}

3. 伪类选择器：可以弥补关系选择器的短板，例如选择同一个父级下的第二个子元素,使用关系选择器就不容易。伪类选择器仍然属于属性选择器范畴,级别高于元素选择器。“伪”，这里是特指, 不需要在元素上添加额外的属性来获取元素。

（1）不分组匹配

元素名称：link {...}
设置超链接a在未被访问前的样式。
元素名称：visited {...}设置超链接a在其链接地址已被访问过时的样式。
元素名称：hover {...}设置元素在其鼠标悬停时的样式。
元素名称：active {...}设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
元素名称：focus {...}设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
元素名称：lang(fr) {...}匹配使用特殊语言的元素。
元素名称：not(s) {...}匹配不含有s选择符的元素。
元素名称：root {... }匹配E元素在文档的根元素。在HTML中，根元素永远是HTML。
元素名称：empty {...}匹配没有任何子元素（包括text节点）的元素。
元素名称：checked {...}匹配用户界面上处于选中状态的元素。(用于input type为radio与checkbox时)
元素名称：enabled {...}匹配用户界面上处于可用状态的元素。
元素名称：disabled {...}匹配用户界面上处于禁用状态的元素。
元素名称：target {...}匹配相关URL指向的元素。

（2）分组匹配

元素名称：first-child {...}匹配父元素的第一个子元素。
元素名称：last-child {...}匹配父元素的最后一个子元素。
元素名称：only-child {...}匹配父元素仅有的一个子元素。
元素名称：nth-child(n) {...}匹配父元素的第n个子元素，假设该子元素不是，则选择符无效。
元素名称：nth-last-child(n) {...}匹配父元素的倒数第n个子元素，假设该子元素不是，则选择符无效。
元素名称：first-of-type {...}匹配父元素下第一个类型的子元素。
元素名称：last-of-type {...}匹配父元素下的所有所选元素的子元素中的倒数第一个。
元素名称：nth-of-type(n) {...}匹配父元素的所有子元素中唯一的那个子元素。
元素名称：nth-last-of-type(n) {...}匹配父元素的倒数第n个子元素。

4. 伪对象选择器

元素名称：first-letter/元素名称::first-letter {...}设置对象内的第一个字符的样式。
元素名称：first-line/元素名称::first-line {...}设置对象内的第一行的样式。
元素名称：before/元素名称::before {...}设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
元素名称：after/元素名称::after {...}设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
元素名称：：placeholder {...}设置对象文字占位符的样式。
元素名称：：selection {...}设置对象被选择时的样式。

CSS选择器演示效果图：

总结：

学好选择器是学习CSS的基础，否则你连人都认不清楚，又怎么进行调度呢？
虽然内容有些多，但是好在容易理解，都是跟着字面意思走的。
建议把CSS手册里面的快捷速查表打印出来，方便编写代码的时候查询使用。