CSS3所有选择器讲解汇总
CSS3选择器是在CSS2.1选择器的基础上新增部分属性选择器和伪类选择器，减少对HTML类和ID的依赖，使编写网页代码更加简单轻松。
根据所获取页面中元素的不同，可以把CSS3选择器分为5大类：元素选择器、关系选择器、伪类选择器、伪对象选择器和属性选择器。
1.标签选择器
标签选择器：根据HTML标签名匹配同类型的所有标签。
- 优点：使用简单，直接引用，不需要为标签添加属性。
- 缺点：影响范围大，容易干扰不同的结构，精度不够。
小结：
CSS3定义了一个特殊类型的选择器：通配选择器，它使用星号（*）表示，用来匹配所有的标签。一般用通配选择器统一所有标签的样式；如：
*{margin:0;padding:0;}
2.类选择器
类选择器以点号（.）为前缀，后面为类名。应用方法：在标签中定义class属性，然后设置属性值为类选择器的名称。
- 优点：最常用的样式设计方法，使用灵活，可以为不同对象，或者同一标签定义一个或多个类样式。
- 缺点：需要手动添加class属性，操作较麻烦，也不利于文档结构的简结。
小结：
当应用多个类样式时，类名之间通过空格进行分隔，效果不受前后顺序的影响。如：
定义三个类样式：
/*颜色类*/
.red{ color:#f00;}
/*下划线类*/
.underline{ text-decoration:underline;}
/*斜体类*/
.italic{ font-style:italic;}
下面在HTML文件中应用这些样式：
<article>
<h1>游子吟h1>
<p class="underline">慈母手中线，游子身上衣。p>
<p class="red italic underline">临行密密缝，意恐迟迟归。p>
<p class="italic">谁言寸草心，报得三春晖。p>
article>
3.ID选择器
ID选择器以井号（#）为前缀，后面为ID名称。应用方法：在标签中定义id属性，然后设置属性值为ID名称。
- 优点：精准匹配
- 缺点：与类选择器相同，需要手动添加id属性，操作比较麻烦，不利于文档结构的简洁。相对于类选择器，ID选择器更缺乏灵活性。
小结：
- 类选择器 和 ID选择器 可以同时作用于同一个标签，但ID选择器的优先级高于类选择器。
- 通过 类选择器 或 ID选择器 添加标签名前缀，可以增加选择器的权重值，这种形式也称为附加选择器，如 article#tangshi（ID选择器前加标签名前缀）、p.red（类选择器前加标签名前缀）。相对于.red选择器，浏览器会优先解析p.red的样式。
4.包含选择器
简单的选择器包括标签选择器、类选择器、ID选择器 和 通配选择器。如果把两个选择器组合在一起，就形成了一个复杂的关系选择器。在HTML5文档结构中，通过关系选择器可以精确匹配结构中特定关系元素。
包含选择器通过 空格 连接 两个选择器，前面的选择器表示包含的祖先元素，后面选择器表示被包含的后代元素。
- 优点：可以匹配特定结构内指定对象，用于缩小匹配范围。
- 缺点：匹配范围较大，影响的层级不受限制。
例如：
首先设计一个简单的网页模板结构。
<header>
<h1>网页标题\<h1>
header>
<footer>
<h1>页脚标题h1>
footer>
接着在< head>标签内添加< style type=“text/css”>标签，定义一个内部样式表，然后定义样式。
最后输入如下样式代码，利用包含选择器限定h1选择器的应用范围。
<style type="text/css">
header h1{font-size:18px;}
footer h1{font-size:12px;}
style>
5.子选择器
子选择器使用尖角号（>）连接两个选择器，前面选择器表示要匹配的父元素，后面选择器表示被包含的匹配子对象。
- 优点：比包含选择器匹配的范围更小，从层级结构上看，匹配目标更明确。
- 缺点：与包含选择器相比，匹配范围有限，用户需要熟悉文档结构。
article p {font-size:14px;color:#666;}/*article标签下的所有p标签，包括子标签下面的p标签*/
article> p {font-size:20px;color:#000;}/*属于article标签下子标签中的p标签的格式*/
6.相邻选择器
相邻选择器使用加号（+）连接两个选择器，前面选择器匹配特定元素，后面选择器根据结构关系，指定同级、相邻的匹配元素。
- 优点：在结构中能够准确找到同级、相邻的元素。
- 缺点：需要熟悉文档结构
有如下文档：
<article>
<h1>游子吟h1>
<p>慈母手中线，游子身上衣。p>
<p>临行密密缝，意恐迟迟归。p>
<p>谁言寸草心，报得三春晖。p>
article>
在内部样式表中，通过相邻选择器准确匹配出标题后面相邻的p元素，并设计文本突出显示。
<style type="text/css">
article p {font-size:14px;color:#666;}
h1 + p {font-size:20px;color:#000;} /*把挨着h1标签中的p标签设置为该样式*/
style>
7.兄弟选择器
兄弟选择器使用波浪符号（~）连接两个选择器，前面选择器匹配特定元素，后面选择器根据结构关系，指定其后同级所有匹配的元素。
- 优点：在结构中能够准确地找到同级背后的元素。
- 缺点：匹配精度没有相邻选择器具体。
<style type="text/css">
article { font-size:14px; color:#666;}
h1 ~ p { font-size:20px; color:#000;}
style>
小结：
- 如果多个样式效果相同，可以把它们合并在一起，这种形式称为选择器分组。分组的方法：使用逗号（,)连接多个选择器，则样式渲染效果将作用于每个选择器所匹配的对象。
- 优点：通过合并样式，可以优化代码，减少代码冗余。
- 缺点：不方便个性化编辑。
示例：
h1,h2,h3,h4,h5,h6 {
margin:0;
margin-bottom:10px;
}
8.属性选择器
属性选择器是根据标签的属性来匹配元素，使用中括号进行标识。语法形式如下：
[属性表达式]
CSS3包括以下7种属性选择器形式。
- E[attr]：根据是否设置特定属性选择器形式。
- E[attr=“value”]：根据是否设置特定属性值来匹配元素。
- E[attr~=“value”]：根据属性值是否包含特定value来匹配元素。注意，属性值是一个词列表，以空格分隔，其中词列表中包含了一个value。
- E[attr^=“value”]：根据属性值是否包含特定value来匹配元素。注意，value必须位于属性值的开头
- E[attr$=“value”]：根据属性值是否包含特定value来匹配元素。注意，value必须位于属性值的结尾。
- E[attr*=“value”]：根据属性值是否包含特定value来匹配元素。
- E[attr|=“value”]：根据属性值是否包含特定value来匹配元素。注意，属性值是value或者以value-开头，如zh-cn。
E表示匹配元素的选择符，可以省略；中括号为属性选择器标识符，不可或缺；attr表示HTML属性名，value表示HTML属性值，或者HTML属性值包含的子字符串。
9.结构伪类选择器
结构伪类可以根据文档结构的关系来匹配特定的元素。结构伪类主要包括以下几种。
- :first-child：匹配第一个子元素。
- :last-child：匹配最后一个子元素。
- :nth-child()：按正序匹配特定子元素。
- :nth-last-child()：按倒序匹配特定子元素。
- :nth-of-type()：在同类型中匹配特定子元素。
- :nth-last-of-type()：按倒序在同类型中匹配特定子元素。
- :first-of-type：匹配第一个同类型子元素。
- :last-of-type：匹配最后一个同类型子元素。
- :only-chid：匹配唯一子元素。
- :only-of-type：匹配同类型的唯一子元素。
- :empty：匹配空元素。
10.否定伪类选择器
:not() 表示否定选择器，它能够过滤掉not()函数匹配的元素。
11.状态伪类选择器
CSS3包含以下3个UI状态伪类选择器。
- :enabled：匹配指定范围内所有可用的UI元素。
- :disabled：匹配指定范围内所有不可用的UI元素。
- :checked：匹配指定范围内所有选择的UI元素。
UI表示用户交互界面，一般指表单对象，如文本框、复选框、按钮等。
12.目标伪类选择器
目标伪类选择器（E:target）表示选择匹配E的所有元素，且匹配元素被相关URL指向。该选择器是动态选择器，只有当存在URL指向该匹配元素时，样式效果才有效。
13.动态伪类选择器
动态伪类是一类行为类样式，只有用户与页面进行交互时有效，包括两种以下形式。
- 锚点伪类，如:link、:visited。
- 行为伪类，如:hover、:active和:focus。
14.伪对象选择器
伪对象选择器主要用于匹配内容变化的对象，如第一行文本、第一个字符、前面内容、后面内容。这些对象是存在的，但其内容又无法具体确定，需要使用特定类型的选择器来匹配它们。
伪对象选择器以冒号（:）作为语法标识符。冒号前可以添加选择符，限定伪对象应用的范围，冒号后为伪对象名称，冒号前后没有空格。语法格式如下：
:伪对象名称
CSS3新语法格式如下：
::伪对象名称
伪对象前面包含两个冒号，主要是为了与伪类选择器进行语法区分。