感谢原文作者：linxiaowu 原文链接：https://zhuanlan.zhihu.com/p/95131311
基本选择器也就是这几种： */Tag/.class/#id，分别为通用元素选择器/标签选择器/class选择器/id选择器，非常地简单，就一笔带过了。
多元素选择器有：
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>属性选择器有：
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>这类选择器有：
该类选择器只有一个：
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>该类选择器有： 大部分都是常用的，也就不多说了。
注意 最后的selection需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性)。
该类选择器有：
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>该类选择器只有一个：
CSS
.first div:not(p){ color: #F00; }HTML
<div class="first"> <div> <p> 因为我排除在外的元素，所以颜色不会变 </p> <section> 因为我排除在外的元素，所以颜色会变 </section> <br /> <sapn> 因为我排除在外的元素，所以颜色会变 </sapn> </div> </div>更多参考 https://www.cnblogs.com/jiumen/p/11390228.html
