一大波CSS3选择器

0. 前言

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

学霸.jpg

1. 简介

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

2. 选择器

2.1 伪类选择器

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

p:first-line{
    color: red; 
}

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

北京欢迎您.png
:first-letter选择每个元素的首字符。

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

北京欢迎您.png
:before在每个元素内容之前插入内容。

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

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

北京欢迎您.png
:after在每个元素内容之后插入内容。

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

北京欢迎您.png

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

div::selection {
    color: deeppink;
}

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

恭喜发财.gif

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>

二级菜单.gif

2.3 状态伪类选择器

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

input:disabled{
        background-color: black;
}

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

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

input:enabled{
        background-color: orange;
}

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

非禁用.png
:read-only选择每个只读的 input 元素。

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

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

只读.png
:focus选择获得焦点的 input 元素。

input:focus{
        background-color: seagreen;
}

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

获得焦点.gif
:checked选择每个被选中的 input 元素。

input:checked{
        height: 100px;
}

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

选中.gif

2.4 结构伪类选择器

:root选择文档的根元素。

:root{
    background-color: pink;
}

根元素.png

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

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

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

空元素.png
: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>

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

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

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

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

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

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

选择属于其父元素的第n子元素（从最后一个子元素开始数）.png

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

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

选择属于其父元素的唯一子元素的元素.png
:first-of-type选择其父元素的第一个子元素。

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

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

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

选择其父元素第n个子元素.png
: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>

父元素下唯一的一个div.png

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>

非element的其他元素.png

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元素.png
element1+element2选择element1元素后一个兄弟element2元素。

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

选择element1元素后一个兄弟element2元素.png
element1>element2选择父元素element1元素的所有element2元素。

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

选择父元素element1元素的所有element2元素.png

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 属性所有元素.png
[attribute][value]选择带有 attribute 和 value 两个属性所有元素。

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

选择带有 attribute 和 value 两个属性所有元素.png
[attribute=value]选择 attribute="value" 的所有元素。

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

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

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

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

选择 attribute 属性值以 "value" 开头的所有元素.png
[attribute~=value]选择 attribute 属性值中有 value 的所有元素。

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

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

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

选择 attribute 属性值中包含 value 的所有元素.png
[attribute ^= "value" ]选择 attribute 属性值以 "value" 开头的所有元素。

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

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

选择 attribute 属性值以 "value" 开头的所有元素.png
[attribute $= "value" ]选择 attribute 属性值以 "value" 结尾的所有元素。

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

选择 attribute 属性值以 "value" 结尾的所有元素.png

3. 后记

烦.jpg

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