页面源码：
<!DOCTYPE html><html><head> ???<meta charset="gbk" /> ???<title>test</title> ???<style> ???*{ ???????font-size:16px; ???????box-sizing:border-box; ???????-moz-box-sizing:border-box; ???????-webkit-box-sizing:border-box; ?????} ????.box{ ???????margin-top:15px; ????} ????.title{ ???????font-size:20px;font-weight:bold;color:rgba(0,0,0,1) ????} ????.content{ ???????background:rgba(0,0,0,1); ???????padding:5px; ???????position:relative;//需要定义为相对布局 ???????-webkit-border-radius: 5px; ???????-moz-border-radius: 5px; ???????border-radius:5px; ???????color:white; ???????margin-top:8px; ????} ????.content:before{ ???????content:""; ???????position:absolute; ???????top:-5px;; ???????left:20px; ???????bottom:100%; ???????border-bottom:6px solid rgba(0,0,0,1); ???????border-right:6px solid transparent; ???????border-left:6px solid transparent; ????} ???</style></head><body> ???<div class="box"> ???????<div class="title"> ???????????CSS选择器-基本 ???????</div> ???????<div class="content"> ???????????<table> ???????????????<tr> ???????????????????<td>.class ???</td><td>选择class的元素</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>#id ???????</td><td>选择id元素</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>* ???????</td><td>选择所有元素</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>element ???????</td><td>选择标签元素</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>element1,element2 ???????</td><td>选择元素所有element1和所有element2</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>element1 element2 ???????</td><td>选择元素element1下的所有element2</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>element1>element2 ???????</td><td>选择元素元素element1下的element2</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>element1+element2 ???????????</td><td>选择紧接在element1元素之后的所有element2元素</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>element1~element2 </td><td>选择前面有element1元素的每个element2元素</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>[attribute] ???</td><td>选择有attribute属性的所有元素</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>[attribute=value]</td><td>选择attribute=value的所有元素</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>[attribute~=value]</td><td>选择attribute包含value的所有元素</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>[attribute|=value]</td><td>选择attribute以value开头的所有元素</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>[attribute^=value] </td><td>attribute属性值以value开头的每个元素</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>[attribute$=value] ???</td><td>attribute属性值以value结尾的每个元素</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>[attribute*=value] </td><td>attribute属性值包含value的每个元素</td> ???????????????</tr> ???????????</table> ???????</div> ???</div> ???<div class="box"> ???????????<div class="title"> ???????????????CSS选择器-复杂 ???????????</div> ???????????<div class="content"> ???????????????<table> ???????????????????<tr> ???????????????????????<td>:link</td><td>选择所有未被访问的链接</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:visited</td><td>选择所有已被访问的链接</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:active</td><td>选择活动链接</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:hover</td><td>选择鼠标指针位于其上的链接</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:focus</td><td>选择获得焦点的元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:first-letter</td><td>首字母</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:first-line ???</td><td>首行</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:first-child ???</td><td>第一个子元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:before ???</td><td>元素的内容之前插入内容</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:after ???</td><td>元素的内容之后插入内容</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:lang(language) ???</td><td>选择带有以language开头的 lang 属性值的每个元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:first-of-type </td><td>选择父元素的首个元素，即该元素是其父元素的第一个子元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:last-of-type ?</td><td>选择父元素的最后元素，即该元素是其父元素的最后一个子元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:only-of-type ?</td><td>选择父元素的唯一元素，即该元素的父元素只有这一个元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:only-child ?????</td><td>选择父元素的唯一一个子元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:nth-child(n) </td><td>选择父元素的第n个子元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:nth-last-child(n) </td><td>选择父元素倒数第n个子元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:nth-of-type(n) </td><td>选择父元素的n个元素，即该元素是其父元素的第n个子元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:nth-last-of-type(n) </td><td>选择父元素倒数n个元素，即该元素是其父元素倒数第n个子元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:last-child </td><td>父元素最后一个子元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:root </td><td>选择文档的根元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:empty ???</td><td>选择没有子元素的元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:targe </td><td>选择当前活动的元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:enabled </td><td>选择当前启用的元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:disabled </td><td>选择当前禁用的元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:checked </td><td>选择当前被选中的元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>:not(selector) </td><td>非选择元素的元素</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>::selection </td><td>选择被用户选取的元素部分，即鼠标点击左键后拉动后选择的元素</td> ???????????????????</tr> ???????????????</table> ???????????</div> ???</div></body></html>CSS选择器
原文地址：https://www.cnblogs.com/xmqa/p/8668364.html