感谢原文作者：linxiaowu
原文链接：https://zhuanlan.zhihu.com/p/95131311
1 基本选择器
基本选择器也就是这几种： */Tag/.class/#id，分别为通用元素选择器/标签选择器/class选择器/id选择器，非常地简单，就一笔带过了。
2 多元素选择器
多元素选择器有：
Demo
CSS
.descendant p{
color: #F00;
}
.child > p{
color: #0F0;
}
.adjacent + p{
color: #00F;
}
.common ~ p{
color: #F2F301;
}
HTML
<div class="descendant">
<p>
我是descendant的后代，所以我颜色会变
</p>
<div>
<p>
我是descendant的后代，所以我颜色会变
</p>
</div>
</div>
<div class="child">
<p>
我是child的子元素，所以我的颜色会变
</p>
<div>
<p>
我是child的孙孙子元素，所以我的颜色不会变
</p>
</div>
</div>
<div>
<p class="adjacent">
这是为了测试相邻兄弟选择器
</p>
<p>
因为我是紧邻着adjacent的元素，所以我的颜色会变
</p>
<div>
<p>
这是为了测试相邻兄弟选择器
</p>
</div>
<p>
因为我不是紧邻着adjacent元素，所以我的颜色不会变
</p>
</div>
<div>
<p class="common">
这是为了测试通用选择器
</p>
<p>
因为我是common的同级兄弟元素，所以我的颜色会变
</p>
<div>
<p>
这是为了测试通用选择器
</p>
</div>
<p>
因为我是common的同级兄弟元素，所以我的颜色会变，这个可以区别出选择器+
</p>
</div>
3 属性选择器
属性选择器有：
Demo
CSS
.first a[target]{
color: #F00;
}
.second a[target=_blank]{
color: #F00;
}
.third img[title~=doumi]{
margin: 5px;
border: 2px solid #00F;
}
.fourth p[lang|=en]{
color: #0F0;
}
.fourth p[class|=color]{
color: #00F;
}
.fifth p[class^=color]{
color: #00F;
}
.sixth p[class$=change]{
color: #0F99FA;
}
.seventh p[class*=text]{
color: #AF00FA;
}
HTML
<div class="first">
<a target="_blank" src="http://blog.5udou.cn">
因为我包含target这个属性，所以我的颜色变了
</a>
<br />
<a src="http://blog.5udou.cn">
因为我不包含target这个属性，所以我的颜色没变
</a>
</div>
<div class="second">
<a target="_blank" src="http://blog.5udou.cn">
因为我包含target属性并且值等于_blank，所以我的颜色变了
</a>
<br />
<a target="_self" src="http://blog.5udou.cn">
虽然我包含target这个属性，但是我的值不等于_blank，所以我的颜色没变
</a>
</div>
<div class="third">
<img src="http://blog.5udou.cn/images/index5.jpg" title="doumi wedding" width="150" />
<span>因为我的title属性中有doumi这个值，所以我有加边框</span>
<br />
<img src="http://blog.5udou.cn/images/index5.jpg" title="wedding" width="150" />
<span>因为我的title属性中没有doumi这个值，所以我没有加边框</span>
<br />
<img src="http://blog.5udou.cn/images/index5.jpg" title="wedding doumiA" width="150" />
<span>因为我的title属性中虽然含有doumi这个字符串，但是不是完整匹配doumi，所以我没有加边框</span>
</div>
<div class="fourth">
<p lang="us">因为我的lang属性不是以en开始的，所以我的颜色没变</p>
<p lang="en-us">因为我的lang属性是以en开始的，所以我的颜色变了</p>
<p class="color-change text">因为我的class属性是以color开始的，所以我的颜色变了</p>
<p class="colorA-change text">因为我的class属性是以colorA开始的(以-为分隔符)，所以不满足整个单词完全等于选择器中color导致颜色不变</p>
</div>
<div class="fifth">
<p class="color-change text">因为我的class属性是以color开始的，所以我的颜色变了</p>
<p class="colorA-change text">因为我的class属性是以color开始的(这个时候不管整个单词)，所以我的颜色变了，与|选择器做个区别</p>
</div>
<div class="sixth">
<p class="color-change">因为我的class属性是以change结尾的，所以我的颜色变了</p>
<p class="color-Achange text">因为我的class属性是以text结尾的，所以我的颜色不变</p>
</div>
<div class="seventh">
<p class="color-text-change">因为我的class属性是包含text这个字符串，所以我的颜色变了</p>
<p class="color-change Atext">因为我的class属性是包含text字符串，所以我的颜色变了，这个例子与~区别开来，~讲究的也是完整单词</p>
</div>
4 动态伪类选择器
这类选择器有：
5 目标伪类选择器
该类选择器只有一个：
Demo
CSS
#test1:target
{
border: 2px solid #666;
}
#test2:target
{
border: 2px solid #CCC;
}
HTML
<p><a href="#test1">点击这里会让锚点test1应用上配置的属性</a></p>
<p><a href="#test2">点击这里会让锚点test2应用上配置的属性</a></p>
<p id="test1">我是锚点test1</p>
<p id="test2">我是锚点test2</p>
6 UI元素状态伪类选择器
该类选择器有：
大部分都是常用的，也就不多说了。
注意 最后的selection需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性)。
7 结构伪类选择器
该类选择器有：
注意
first-child伪类选择器选择是它父元素的第一个孩子的所有元素，这个父元素可以为任意的元素，比如body/div/section等等，所以p:first-child可以选择大部分p标签。另外伪类有更高的优先级比元素选择器。p:first-child会覆盖掉div>p的样式。:nth-child注意与nth-of-type的区别！可以参考demo看出二者的不一样！only-child注意与only-of-type的区别
Demo
CSS
:root
{
background: rgba(10, 10, 10, 0.2);
}
.first p:first-child{
color: #F00;
}
.second p:first-line{
color: #0F0;
}
.second p:first-letter{
color: #00F;
}
.third p:before{
content: 'Before';
color: #888;
}
.third p:after{
content: 'After';
color: #666;
}
.fourth p:last-child{
color: #F00;
}
.fifth p:nth-child(2){
color: #FF90AA;
}
.sixth p:nth-last-child(2){
color: #FF0011;
}
.sixth p:nth-last-child(3){
color: #FF0011;
}
.seventh p:nth-of-type(3){
color: #11AA11;
}
.eighth p:only-child{
color: #00EEAA
}
.nineth p:only-of-type{
color: #A010AA
}
.tenth div:empty{
border: 1px solid #000;
height: 20px;
width: 100%
}
HTML
<div class="first">
<p>
因为我是第一个孩子，所以我的颜色变了
</p>
<div>
<p>
因为我是div的第一个孩子，所以我的颜色也变了
</p>
<p>
因为我不是div的第一个孩子，所以我的颜色不变
</p>
</div>
<p>
因为我不是.first的第一个孩子，所以我的颜色也不变
</p>
<section>
<p>
因为我是section的第一个孩子，所以我的颜色也变了
</p>
</section>
</div>
<div class="second">
<p>
我(first-letter)是测试的第一行，所以我的颜色应该会变化的我是第二行，不会变颜色的我是第二行，不会变颜色的我是第二行，不会变颜色的我是第二行，不会变颜色的我是第二行，不会变颜色的我是第二行，不会变颜色的
</p>
</div>
<div class="third">
<p>这里在p标签前面添加Before这个单词，然后后面添加After这个单词</p>
</div>
<div class="fourth">
<p>
因为我不是。fourth的最后个孩子，所以我的颜色不会变
</p>
<div>
<p>
因为我是div的第一个孩子，所以我的颜色不会变
</p>
<p>
因为我是div的最后一个孩子，所以我的颜色会变
</p>
</div>
<p>
因为我不是.fourth的最后一个孩子，所以我的颜色不会变
</p>
<section>
<p>
因为我是section的最后一个孩子，所以我的颜色也变了
</p>
</section>
</div>
<div class="fifth">
<p>
因为我是div的第一个孩子，所以我的颜色不会变
</p>
<p>
因为我是div的第二个孩子，所以我的颜色会变p:nth-child(2)
</p>
<p>
因为我是div的第三个孩子，所以我的颜色不会变
</p>
</div>
<div class="sixth">
<p>
因为我是div的倒数第四个孩子，所以我的颜色不会变
</p>
<p>
因为我是div的倒数第三个孩子，并且是p标签，所以我的颜色会变p:nth-last-child(3)
</p>
<div>
虽然我是div的倒数第二个孩子，但是我不是p标签，所以颜色不变p:nth-last-child(2)
</div>
<p>
因为我是div的倒数第一个孩子，所以我的颜色不会变
</p>
</div>
<div class="seventh">
<p>
虽然我是p标签的同级兄弟，但我的顺序是1，所以颜色不变
</p>
<p>
虽然我是p标签的同级兄弟，但我的顺序是2，所以颜色不变
</p>
<div>
虽然我是p标签的同级兄弟，但我的类型和p标签不一样，所以颜色不变
</div>
<p>
因为我是同类型p的同级兄弟第三个，所以我的颜色会变p:nth-of-type(3)
</p>
</div>
<p>后面的nth-last-of-type(n)/first-of-type/last-of-tye都是类似的</p>
<div class="eighth">
<div>
<p>
我的父元素div只包含我这个子元素p，所以我的颜色会变 p:only-child
</p>
</div>
<div>
<p>
我的父元素div包含两个子元素p，所以我的颜色不会变
</p>
<p>
我的父元素div包含两个子元素p，所以我的颜色不会变
</p>
</div>
</div>
<div class="nineth">
<div>
<p>
我的父元素div包含两个同类型的子元素p，所以我的颜色不会变
</p>
<p>
我的父元素div包含两个同类型的子元素p，所以我的颜色不会变
</p>
</div>
<div>
<p>
我的父元素div只包含一个同类型的子元素p，所以我的颜色会变
</p>
<section>
虽然我也是满足同类型的子元素，但不是p标签，所以颜色不会变
</section>
</div>
</div>
<div class="tenth">
<div></div>
<div>因为我的父元素有我这这些文本(子元素)，所以颜色不会变</div>
</div>
8 否定伪类选择器
该类选择器只有一个：
Demo
CSS
.first div:not(p){
color: #F00;
}
HTML
<div class="first">
<div>
<p>
因为我排除在外的元素，所以颜色不会变
</p>
<section>
因为我排除在外的元素，所以颜色会变
</section>
<br />
<sapn>
因为我排除在外的元素，所以颜色会变
</sapn>
</div>
</div>