0. 前言

也许你已经学会了CSS的几个简单常用的选择器：#id，.class，标签选择器，后代选择器，这就让你满足了么？so，我在里列举一些CSS3选择器，让你在写代码的时候更加得心应手，当然，我也是想在我忘了的时候，可以自己反过头来看看。

1. 简介

选择器的作用：使用选择器对HTML页面进行操作，实现一对一，多对一，一对多的控制。

2. 选择器

2.1 伪类选择器

:first-line 匹配每个元素里首行。

p:first-line{     color: red;     }

<p>     北京欢迎您！<br/>     Welcome to Beijing! </p>

:first-letter选择每个元素的首字符。

p:first-letter{     font-size: 20px;     color: blue;     }

:before在每个元素内容之前插入内容。

p:before{     content: "哈哈"; }

<p>北京欢迎您！</p>

:after在每个元素内容之后插入内容。

p:after{     content: "嘿嘿"; }

::selection选择被用户选取的元素部分。

div::selection {     color: deeppink; }

<div>     大家，新年快乐，恭喜发财！ </div>

2.2 目标伪类选择器

:target选择当前触发#新的元素

div:target{         width: 200px;         height: 200px;         background-color: orange; }

<p><a href="#first">第一个</a></p> <div id="first"></div> <p><a href="#second">第二个</a></p> <div id="second"></div> <p><a href="#third">第三个</a></p> <div id="third"></div>

2.3 状态伪类选择器

:disabled选择每个禁用的 input 元素

input:disabled{         background-color: black; }

禁用：<input type="text" disabled="disabled" />

:enabled选择每个启用的 input 元素。

input:enabled{         background-color: orange; }

非禁用：<input type="text" />

:read-only选择每个只读的 input 元素。

input:read-only{         background-color: pink;     }

只读：<input type="text" readonly="readonly" />

:focus选择获得焦点的 input 元素。

input:focus{         background-color: seagreen; }

获得焦点：<input type="text" />

:checked选择每个被选中的 input 元素。

input:checked{         height: 100px; }

选中：<input type="checkbox" />

2.4 结构伪类选择器

:root选择文档的根元素。

:root{     background-color: pink; }

:empty选择没有子元素的空元素

p{     height: 50px;     background-color: orange; }

<p></p> <p></p> <p>  </p> <p><!-- 这是注释 --></p> <p>有内容的P元素</p>

:first-child选择属于其父元素的首个元素。

#box :first-child{         background-color: red;         height: 100px; }

<div id="box">     <p>1</p>     <p>2</p>     <p>3</p>     <p>4</p>     <p>5</p>     <p>6</p> </div>

:last-child选择属于其父元素最后一个子元素。

#box :last-child{         background-color: red;         height: 100px; }

:nth-child(n)选择属于其父元素的第n个子元素。

#box :nth-child(2){         background-color: red;         height: 100px; }

:nth-last-child(n)选择属于其父元素的第n子元素（从最后一个子元素开始数）。

#box :nth-last-child(2){         background-color: red;         height: 100px; }

:only-child选择属于其父元素的唯一子元素的元素。

#box2 :only-child{         background-color: brown;         height: 150px; }

:first-of-type选择其父元素的第一个子元素。

#box p:first-of-type{         background-color: red;         height: 100px; }

:nth-of-type(n)选择属于其父元素的第n子元素。

#box :nth-of-type(2){         background-color: red;         height: 100px; }

:only-of-type选择属于其父元素唯一的元素。

#box div:only-of-type{         height: 100px;         background-color: red; }

<div id="box">             //这是新添加的父元素下唯一的一个div             <div></div>             <p>1</p>             <p>2</p>             <p>3</p>             <p>4</p>             <p>5</p>             <p>6</p> </div>

2.5 否定伪类选择器

:not(element)选择非element元素的每个元素。

li{     background-color: gold; }  li:not(.second){     background-color: red; }

<ul>     <li>第一个</li>     <li class="second">第二个</li>     <li>第三个</li>     <li>第四个</li> </ul>

2.6 层次选择器

element1~element2选择element1元素后面的每个兄弟element2元素。

div p~h3{     color: red; }

<p>最外层的P元素</p> <div>     <h3>我是h3</h3>     <h3>我是h3</h3>     <h4>我是h4</h4>     <p>内层的P元素</p>     <h3>我是h3</h3>     <h3>我是h3</h3>     <h4>我是h4</h4>     <div>         <p>最内层的P元素</p>     </div> </div>

element1+element2选择element1元素后一个兄弟element2元素。

div p+h3{     color: blue;     font-size: 40px; }

element1>element2选择父元素element1元素的所有element2元素。

div>div>p{     font-size: 30px;     color: blue;     }

2.7 属性选择器

[attribute]选择带有 attribute 属性所有元素。

input[value]{         background-color: orange; }

<input type="text" name="inner" /><br /> <a href="01_伪元素选择器.html">哈哈哈哈哈哈</a><br /> <input type="text" name="inner be" /><br /> <input type="button" name="inner-haha" value="我是一个按钮" /><br /> <input type="submit"  value="我是一个提交" /><br />

[attribute][value]选择带有 attribute 和 value 两个属性所有元素。

input[value][name]{             background-color: skyblue; }

[attribute=value]选择 attribute=”value” 的所有元素。

input[value="我是一个提交"]{         background-color: seagreen; }

[attribute |= "value" ]选择 attribute 属性值以 “value” 开头的所有元素。

input[name |= "inner" ]{         background-color: red; }

注意：有空格的也能被选中， 而以”-“为衔接才能不被选中

[attribute~=value]选择 attribute 属性值中有 value 的所有元素。

input[name ~= "be"]{         background-color: cornflowerblue; }

[attribute*=value]选择 attribute 属性值中包含 value 的所有元素。

input[value *= "提交"]{         background-color: indigo; }

[attribute ^= "value" ]选择 attribute 属性值以 “value” 开头的所有元素。

input[name ^= "inner"]{         background-color: deeppink; }

注意：[attribute |= "value" ]与[attribute ^= "value" ]的区别是[attribute ^= "value" ]不需要考虑”-“。

[attribute $= "value" ]选择 attribute 属性值以 “value” 结尾的所有元素。

a[href $= ".html"]{         font-size: 30px; }

3. 后记

哎，写这些标签太枯燥了，没什么太大意思，但我还是坚持的写完了，一大波CSS3选择器希望对你有帮助，点赞啦！，分享啊！