CSS 选择器有很多，总结几个常用的选择器，如果想了解更多选择器请点击我查看或者如果英文好得情况下点击我查看也是可以的哦~
通配符选择器元素选择器ID选择器类选择器并集选择器(选择器分组)交集选择器子元素选择器后代元素选择器兄弟元素选择器伪类选择器子元素的伪类伪元素选择器属性选择器否定伪类* 可以选中所有的元素
<style> * { color: deeppink; } </style> <body> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> </body>元素就是标签，可以直接使用标签的名称来选择页面中的元素。
<style> a { color: deepskyblue; } </style> <body> <p>我是一个段落</p> <a href="#">我是一个a标签</a> <p>我是一个段落</p> <a href="#">我是一个a标签</a> <p>我是一个段落</p> </body>通过元素的#id来选中符合条件的元素，同一个页面中，id值不能重复。
<style> #p1 { color: greenyellow; } </style> <body> <p>我是一个段落</p> <a href="#">我是一个a标签</a> <p id="p1">看我的样式不一样哦~</p> <a href="#">我是一个a标签</a> <p>我是一个段落</p> </body>可以为元素设置 class 属性，class 属性和 id 类似，但是class可以重复。 拥有相同class属性值的元素称为一组。 还可以为同一个元素设置多个class 属性值，属性值之间用空格分隔。
<style> .p1 { color: deepskyblue; } .test { font-size: 20px; } </style> <body> <p class="p1">我的样式比较好看</p> <p class="p1">我的样式比较好看</p> <p class="p1">我的样式比较好看</p> <p class="p1 test">与众不同</p> <p>我么有样式</p> <p>我么有样式</p> </body>选择器分组可以选中多个选择器所对应的元素，每个选择器之间用,分隔。
<style> #test, .p1, a { color: deeppink; } </style> <body> <p id="test">与众不同</p> <p class="p1">我的样式比较好看</p> <a href="#">其实设置的样式都是一样的</a> </body> </html>可以同时选中同时满足多个选择器的元素，选择器之间不需要分隔符，直接写到一起就行。
<style> p.p1 { /* 这段代码的意思是：选中 class 为 p1 的 p 元素。 */ color: darkgreen; } </style> <body> <a class="p1">与众不同</a> <p class="p1">我的样式比较好看</p> <a href="#">其实设置的样式都是一样的</a> </body>使用 >来选择直接子元素， 直接子元素是指的儿子元素，不包括孙子元素。
IE6 以下版本不支持直接子元素选择器
<style> .box>p { color: deeppink; } </style> <body> <div class="box"> <p>我是儿子元素</p> <p>我是儿子元素</p> <div> <p>emmm我是孙子元素..</p> <p>emmm我是孙子元素..</p> </div> </div> </body>使用空格来选中后代元素，后代元素指的是所有的后代元素，包括儿子元素和孙子元素重孙子元素…
<style> .box p { color: goldenrod; } </style> <body> <div class="box"> <p>我是儿子元素</p> <p>我是儿子元素</p> <div> <p>emmm我是孙子元素..</p> <p>emmm我是孙子元素..</p> </div> </div> </body>使用+来选择紧挨着我的兄弟 使用~来选择我后边的所有兄弟
<style> .gege~.didi { color: deeppink; } .gege+.didi { color: deepskyblue; } </style> <body> <ul> <li class="gege">我是老大</li> <li class="didi">我是老二</li> <li class="didi">我是老三</li> <li class="didi">我是老四</li> <li class="didi">我是老五</li> <li class="didi">我是老六</li> </ul> </body>伪类：专门用来表示元素的一种特殊的状态， 比如：访问过的超链接，没有访问过的超链接，获取焦点的文本框。 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。
:link 表示一个普通的没有访问过的链接 :visited 表示已访问过的链接。由于涉及到用户的隐私，visited 伪类只能设置字体的颜色。 :hover 表示鼠标移入时的效果 :active 表示元素被点击时的状态。 :focus 表示获取焦点时，通常用于文本框。 ::selection 设置当 p 标签中的文字被选中时的样式。大部分浏览器可以直接使用::selection，而火狐浏览器 需要加 -moz 前缀 ::-moz-selection 这样写才可以生效。
<style> /* 初始化 连接样式，默认的有点难看 */ a { text-decoration: none; color: #999999; } /* 未访问的连接样式 */ a:link { color: goldenrod; } /* 已访问的连接样式 */ a:visited { color: deeppink; } /* 鼠标移入效果 */ a:hover { color: darkgreen; } /* 鼠标点击效果 */ a:active { color: rebeccapurple; } /* 获取焦点事件 */ input:focus { background: green; } /* 文字被选中时的状态 */ p::selection { background-color: pink; } /* 兼容火狐 */ p::-moz-selection { background-color: pink; } </style> <body> <a href="http://www.baidu.com">已访问的连接</a><br> <a href="http://www.asdasdasdasd.com">未访问过的连接</a> <input type="text"> <p>运行结果将会以 GIF 的形式展示给大家呢~</p> </body>以下的参数 n 从 1 开始
first-child 系列是从大分类里找符合条件的元素。例如：一家里有三个男孩，三个女孩。它是从 “所有孩子”中进行选择。
:first-child 选中第一个子元素 :last-child 选中最后一个子元素 :nth-child(n) 从前往后选择第n个子元素 :nth-last-child(n) 从后往前选择第n个子元素 :only-child 选择唯一的子元素
<style> /* 设置第一个子元素，并且子元素必须得是 li 标签 */ ul li:first-child { color: red; } /* 设置最后一个为li的子元素 */ ul li:last-child { color: green; } /* 设置第三个为 li 的子元素 */ ul li:nth-child(3) { color: deeppink; } /* 设置倒数第三个为 li 的子元素 */ ul li:nth-last-child(3) { color: deepskyblue; } /* 设置唯一的 li 子元素 */ ul li:only-child { color: tomato; } </style> <body> <ul> <li>我是子元素1</li> <li>我是子元素2</li> <li>我是子元素3</li> <li>我是子元素4</li> <li>我是子元素5</li> <li>我是子元素6</li> <li>我是子元素7</li> <li>我是子元素8</li> <li>我是子元素9</li> </ul> <ul> <li>我是独生子</li> </ul> </body>nth-of-type 系列是从小分类里查找。例如：男孩一个分类，女孩一个分类。
:first-of-type 选择第一个子元素 :last-of-type 选择最后一个子元素 :nth-of-type(n) 从前往后选择第n个子元素 :nth-last-of-type(n) 从后往前选择第n个子元素 :only-of-type 选择唯一的子元素
<style> /* 设置第一个为 p 的子元素 */ ul p:first-of-type { color: red; } /* 设置最后一个为 p 的子元素 */ ul p:last-of-type { color: green; } /* 设置第三个为 li 的子元素 */ ul li:nth-of-type(3) { color: deeppink; } /* 设置倒数第三个为 li 的子元素 */ ul li:nth-last-of-type(3) { color: deepskyblue; } /* 设置唯一的 li 子元素 */ ul a:only-of-type { color: tomato; } </style> <body> <ul> <p>我才是老大</p> <li>我是子元素1</li> <li>我是子元素2</li> <li>我是子元素3</li> <li>我是子元素4</li> <li>我是子元素5</li> <a href="#">我长得比较奇怪</a> <li>我是子元素6</li> <li>我是子元素7</li> <li>我是子元素8</li> <li>我是子元素9</li> <p>我才是老小</p> </ul> </body>注意：如果子元素的类型相同，使用 first-child 和 first-of-type 都可以 如果子元素的类型不同的话，使用first-child
:empty 选择为空的元素
<style> /* 设置为空的 div 元素的样式 */ div:empty { width: 100px; height: 100px; background-color: deeppink; } </style> <body> <div>我是一个有内容的div元素</div> <div></div> </body>使用为元素来表示元素中的一些特殊的位置。 :first-letter 表示选中第一个字符 :first-line 表示选中第一行 :before 表示元素的最前边 :after 表示元素的最后边
<style> /* 设置第一个字符 */ p::first-letter { color: deeppink; } /* 设置第一行 */ p::first-line { background-color: deepskyblue; } </style> </head> <body> <p> hello，我是一个p标签<br> 我是第二行啦啦啦. </p> </body>::before 和 ::after 一般配合content使用，通过 content 可以向 ::before 或 ::after 的位置添加一些内容。
<style> p::before { content: "start "; color: darkcyan; } p::after { content: "end."; color: darkcyan; } </style> <body> <p>我是一个p标签哦~</p> </body>属性选择器 可以根据元素中的属性或者属性值来选择元素。 [name] 表示选择包含name 属性名的元素 [name=val]表示选择包含 name 属性，且属性值为 val 的元素 [name^=val] 表示选择包含 name 属性，且属性值以val 开头的元素 [name$=val] 表示选择包含 name 属性，且属性值以val 结尾的元素 [name*=val] 表示选择包含 name 属性，且属性值包含val 的所有元素
<style> /* 选择包含 class 属性的 p 元素 */ p[class] { color: deeppink; } /* 选择包含 class 属性的 p 元素，并且 属性值为 p3 */ p[class="p3"] { background-color: darkcyan; } /* 选择以 字符ip 开头的 p 元素 */ p[class^="ip"] { color: darkgreen; } /* 选择以字符 1 结尾的 p 的元素 */ p[class$="1"] { background-color: deepskyblue; } /* 设置class 包含字符 p2 的所有元素 */ p[class*="p2"] { background-color: yellowgreen; } </style> </head> <body> <p class="p1 p2">大家好，我是 p1</p> <p>大家好，我是 p2</p> <p class="p3">大家好，我是 p3</p> <p>大家好我是 p4</p> <p class="ip1">大家好，我是 ip1</p> <p class="ip2">大家好，我是 ip2</p> </body>not()可以从已选中的元素中剔除某些元素
<style> /* 设置所有的p元素，除了第三个 */ p:not(:nth-child(3)){ color: deeppink; } </style> </head> <body> <p>大家好，我是 p1</p> <p>大家好，我是 p2</p> <p>大家好，我是 p3</p> <p>大家好，我是 p4</p> <p>大家好，我是 p5</p> <p>大家好，我是 p6</p> </body>以上内容就是CSS选择器相关的内容啦，最后通关选择器小游戏就说明 CSS 选择器掌握的差不多啦。
