（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：更多内容请查看我的目录。）
1. 选择器简介
大家都参加过学校运动会开幕式吧，或者看过电视节目中的开幕式。不同的队伍有不同的穿着，不同的口号和队形，不同的人有不同的职责，站位也不一样。那么如果你作为开幕式的负责人，你该如何安排呢？让哪个队伍穿什么颜色的衣服，哪个人负责在前面举旗，哪些人喊什么口号，做什么动作。作为负责人，你会如何安排下去呢？比如，你准备了白色，蓝色，绿色的衣服，你得决定哪些人来穿什么颜色的衣服吧，你可能会安排说，一年级学生统一穿蓝色。这里，一年级学生就是你选择的对象，蓝色衣服就是他们的表现样式。同样你也可以说所有男生要穿黑裤子，每班班长要站出来扛大旗，这里你会发号各种指令，让队伍表现的如你所愿，但是每一种指令都会匹配到某个或者某一类人身上，这里你指派的对象就是选择器了。
而对于css来讲，它的选择器就是能帮他找到指定元素的方法。
2. 选择器分类
我们来回忆一下html元素，指的是从开始标签（start tag）到结束标签（end tag）的所有代码，它可以拥有属性和内容。如下所示：
<p>hi</p>
<p>hello</p>
<p>你好</p>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
...
<li>倒数第二行</li>
<li>最后一行</li>
</ul>
<div>
<p>hi</p>
<p>hello</p>
<p>你好</p>
</div>
2.1 唯一标识-id选择器
我们想找到如上所述代码的第一行的hi，让它显示成蓝色，也就是准确找到某一个元素给他匹配指定样式有什么办法呢？我们可以给他一个唯一识别的id，就像你入学时学校分配给你的学号，或者你的身份证号，这些是唯一的，只属于你的号码。所以找到某个元素，可以使用id选择器。
id选择器
用法说明：
选择器：#id
示例：#key
作用：选择“id=key”的元素
特征：#开头
用法示例：
<p id="sayHi">hi</p>
找到id并匹配样式的方法如下：
#sayHi {color:blue;}
请记住，id选择器是唯一能准确地找到某个元素的办法。
2.2 基础标签类选择-元素选择器和类选择器
现在考虑一个需求，你想要所有的运动员穿运动服，长跑运动员穿白色运动服，田径运动员穿红色运动五，怎么办？喊出所有人的学号吗，显然不可能。我们得为这些人打一个标签。其实html就是这么干的，每一类元素都有自己的标签，就是元素名或者标签名，如果你想操作的这一类元素不是已经拥有某个标签名的元素，你也可以为他们专门定义一个类名。这就是我们的元素选择器和类选择器。
元素选择器:
用法说明：
选择器：element
示例：p
作用：选择所有p元素
特征：标签名
用法示例：
p {color: red;}
div {width: 100px;}
类选择器：
用法说明：
选择器：.class
示例：.val
作用：选择所有class="val"的元素
特征：.开头
用法示例：
<p class="blue">hi</p>
<p class="blue">hello</p>
.blue {color:blue;}
2.3 特征选择-属性选择器
每个人都有一些特征，比如身高。在队伍中，我们往往会让高的人站后面，魁梧的人举旗帜等等。html中的元素也拥有众多的特征-属性。其实id和class也属于属性，只不过他们是特殊的具有标识功能的属性。
属性选择器：
用法说明：
选择器：[attribute]
示例：[target]
作用：选择所有带有target属性的元素
特征：中括号包围
选择器：[attribute=value ]
示例：[target="_blank“]
作用：选择所有target="_blank"属性的元素
特征：中括号包围,=链接
选择器：[attribute~=value ]
示例：[title~="_flower“]
作用：选择所有title属性包含单词“flower”的元素
特征：中括号包围,~=链接,属性中包含独立的单词为value
选择器：[attribute|=value ]
示例：[lang|="en“]
作用：选择所有lang属性以“en”单词开头的元素
特征：中括号包围,|=链接,属性中必须是完整且唯一的单词，或者以-分隔开
选择器：[attribute^=value ]
示例：[src^="http“]
作用：选择所有src属性以“http”字符串开头的元素
特征：中括号包围，^=链接
选择器：[attribute$=value ]
示例：[src$=".jpg“]
作用：选择所有src属性以“.jpg”字符串结尾的元素
特征：中括号包围，$=链接
选择器：[attribute*=value ]
示例：[src*="abc“]
作用：选择所有src属性包含“abc”字符串的元素
特征：中括号包围，*=链接
用法示例：
<p otitle="sayhi">hi</p>
<p otitle="sayhi">hello</p>
[otitle] {color:blue;}
2.4 隐藏标签类选择-伪类和伪元素
前面提到了基础标签类选择，就是元素选择器，和类选择器，这些都是在html的结构中注明的选择器。css还为我们提供了特殊的选择器，能够帮助我们像类和元素一样去做出更复杂的选择。
2.4.1伪类选择器
效果就像给某些特定的元素添加一个类，当然该元素是已存在的。伪类的种类众多，可以参考这两篇文章CSS选择器和深入理解CSS伪类。（因为这节主要是概念内容，从定义和示例去理解记忆即可，或者在使用中多学习留意，不必刻意解读和记忆，也不必做流水账的罗列，大家有兴趣可以多看看文档亦可）。下面这段对于伪类的区分很有意思，大家可以参考一下：
伪类顺序：link-visited-focus-hover-active
1、静态伪类(只应用于超链接)
[注意]visited伪类只能设置字体颜色、边框颜色、outline颜色的样式
:link 未访问
:visited 已访问
a:link{color: red;}
a:visited{color: green;}
2、动态伪类(可应用于任何元素)
:focus 拥有焦点(IE7-不支持)
:hover 鼠标停留(IE6-不支持给<a>以外的其他元素设置伪类)
:active 正被点击(IE7-不支持给<a>以外的其他元素设置伪类)
3、目标伪类:target(IE8-不支持)
匹配锚点对应的目标元素
:target{color: red;}
#test :target{color: red;}//id为test的目标元素
4、UI元素伪类(IE8-不支持)
:enabled 可用状态
:disabled 不可用状态
:checked 选中状态
示例
input:enabled{color: red}
[注意]input和:和enabled之间都不可以有空格
5、结构伪类(IE8-不支持)
E:first-child(IE6-不支持) 父元素的第一个子元素,且该子元素是E，与E:nth-child(1)等同
E:last-child(IE6-不支持) 父元素的最后一个子元素，且该子元素是E，与E:nth-last-child(1)等同
:root 选择文档的根元素，即<html>元素
E F:nth-child(n) 选择父元素的第n个子元素，父元素是E，子元素是F
E F:nth-last-child(n) 选择父元素的倒数第n个子元素，父元素是E，子元素是F
E F:nth-of-type(n) 选择父元素的具有指定类型的第n个子元素，父元素是E，子元素是F
E F:nth-last-of-type(n) 选择父元素的具有指定类型的倒数第n个子元素，父元素是E，子元素是F
E:first-of-type 选择父元素中具有指定类型的第1个子元素，与E:nth-of-type(1)相同
E:last-of-type 选择父元素中具有指定类型的最后1个子元素，与E:nth-last-of-type(1)相同
E:only-child 选择父元素中只包含一个子元素，子元素是E
E:only-of-type 选择父元素中只包含一个同类型的子元素，子元素是E
E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点
[注意]n可以是整数(从1开始)，也可以是公式，也可以是关键字(even、odd)
示例：
p:first-child 代表的并不是<p>的第一个子元素，而是<p>元素是某元素的第一个子元素
p > i:first-child 匹配所有<p>元素中的第一个<i>元素
p:first-child i 匹配所有作为第一个子元素的<p>元素中的所有<i>
元素
6、:lang 相当于|=属性选择器(IE7-不支持)
p:lang(en) 匹配语言为"en"的<p>
2.4.2 伪元素选择器
效果就像专门创造一个虚拟的元素并选中，每个选择器只能有一个伪元素且必须放在最后。
选择器：:first-letter
示例：p:first-letter
作用：选择每个p元素的首字母
选择器：:first-line
示例：p:first-line
作用：选择每个p元素的首行
选择器：:first-child
示例：p:first-child
作用：选择属于父元素的第一个子元素的每个 <p> 元素。
选择器：:before
示例：p:befor
作用：在每个p元素的内容之前插入内容
选择器：:after
示例：p:after
作用：在每个p元素的内容之后插入内容
选择器：::selection
示例：::selection
作用：选择被用户选取的元素部分
注意：css3为了区分伪类和伪元素，引入了::来标记伪元素。
2.3 关系选择-社群关系，亲戚关系
2.3.1 社群关系-分组选择器
分组选择器：
选择器：element, element
示例：div, p
作用：选择所有div元素和所有p元素
特征：，连接，可以翻译成“和”
2.3.2 亲戚关系-后代选择器，子代选择器，通用兄弟选择器和相邻兄弟选择器
后代选择器：
选择器：element element
示例：div p
作用：选择所有div元素后代的所有p元素
特征：空格连接，可以翻译成“后代的”
子代选择器：
选择器：element>element
示例：div>p
作用：选择所有div元素子代的所有p元素
特征：">"连接，可以翻译成“子代的”
通用兄弟选择器：
选择器：element~element
示例：div~p
作用：选择所有div元素兄弟的所有p元素
特征：~连接，可以翻译成“兄弟的”
相邻兄弟选择器：
选择器：element+element
示例：div+p
作用：选择所有div元素相邻后一个兄弟的所有p元素
特征：+连接，可以翻译成“相邻后一个兄弟”
2.5 通配选择器
就好像教官在喊：“全体都有”，选择所有的元素
通配选择器：
选择器：*
示例：*
作用：选择所有元素
参考
CSS选择器
CSS Selectors
深入理解伪元素
深入理解CSS伪类
W3school-CSS 选择器参考手册
css属性选择器=,|=,^=,$=,=的区别 （学习笔记）
CSS3伪类和伪元素的特性和区别
详解 CSS 属性 - 伪类和伪元素的区别
网友评论