CSS3选择器介绍

1.css3属性选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css3属性选择器</title>
    <style type="text/css">
    /*  id包含div字符串*/

    [id*=div] {
        color: lime;
    }
    /*开始字符串为div*/

    [id^=div] {
        color: red;
    }
    /*结束字符串为div*/

    [id$=div] {
        color: blue;
    }
    </style>
</head>

<body>
    <div>
        <div id="div1">11</div>
        <div id="2div2">22</div>
        <div id="3div3">33</div>
        <div id="44div">44</div>
        <div id="wowo">55</div>
    </div>
</body>

</html>

2.css3结构伪类选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css3结构伪类选择器</title>
    <style type="text/css">
    /*  第一行*/

    body>p:first-line {
        color: aqua;
    }
    /* 首字母*/

    body>p:first-letter {
        color: red;
    }
    /*元素前插入内容*/

    li:before {
        content: "--";
        color: yellow;
    }
    /*元素后插入内容*/

    li:after {
        content: "++";
        color: green;
    }
    /*根元素*/

    :root {
        background: darkgrey;
    }
    /*排除*/

    div *:not(h1) {
        background: green;
    }
    /*为空*/

    .bb li:empty {
        background: green;
    }
    /*业内跳转目标*/

    :target {
        background: orange;
    }
    </style>
</head>

<body>
    <p>
        我是第一行
        <br> 我是第二行
    </p>
    <ul>
        <li class="aa">1</li>
        <li>2</li>
        <li class="aa">3</li>
        <li class="aa">4</li>
    </ul>
    <ul class="bb">
        <li>1</li>
        <li></li>
        <li>3</li>
        <li></li>
        <li>5</li>
        <li></li>
    </ul>
    <div>
        <h1>111</h1>
        <h2>222</h2>
        <h3>333</h3>
    </div>
    <a href="#a1">111</a>
    <a href="#a2">222</a>
    <a href="#a3">333</a>
    <div id="a1">a1</div>
    <div id="a2">a2</div>
    <div id="a3">a3</div>
</body>

</html>

3.css3选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css3选择器</title>
    <style type="text/css">
    /*第一个元素*/

    li:first-child {
        background-color: yellow;
    }
    /*最后一个元素*/

    li:last-child {
        background-color: blue;
    }
    /*上到下第几个*/

    li:nth-child(2) {
        background-color: #666;
    }
    /*下到上第几个*/

    li:nth-last-child(2) {
        background-color: #888;
    }
    /*基数*/

    li:nth-child(odd) {
        color: red;
    }
    /*偶数*/

    li:nth-child(even) {
        color: #999;
    }
    /*只算同类元素*/

    .aa h3:nth-of-type(2),
    .aa h4:nth-of-type(2) {
        color: red;
    }
    /*样式循环*/

    .bb li:nth-child(4n+1) {
        background-color: #111;
    }

    .bb li:nth-child(4n+2) {
        background-color: #222;
    }

    .bb li:nth-child(4n+3) {
        background-color: #333;
    }

    .bb li:nth-child(4n) {
        background-color: #444;
    }
    /*只有一个元素*/

    li:only-child {
        background-color: green;
    }
    </style>
</head>

<body>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li>55</li>
        <li>66</li>
        <li>77</li>
        <li>88</li>
    </ul>
    <div class="aa">
        <h3>111</h3>
        <h4>222</h4>
        <h3>111</h3>
        <h4>222</h4>
        <h3>111</h3>
        <h4>222</h4>
        <h3>111</h3>
        <h4>222</h4>
        <h3>111</h3>
        <h4>222</h4>
    </div>
    <div class="bb">
        <ul>
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
        </ul>
    </div>
    <ul>
        <li>11</li>
    </ul>
</body>

</html>

4.UI元素状态伪类选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>UI元素状态伪类选择器</title>
    <style type="text/css">
    /*hover鼠标在控件上*/

    input[type="text"]:hover {
        background-color: darkviolet;
    }
    /*focus获取焦点*/

    input[type="text"]:focus {
        background-color: aqua;
    }
    /*active鼠标按住*/

    input[type="text"]:active {
        background-color: #666;
    }
    /*checked已选择状态*/

    input[type="checkbox"]:checked {
        outline: 2px solid gold;
    }
    /*enabled可用*/

    .aa input[type="text"]:enabled {
        background: yellow;
    }
    /*disabled不可用*/

    .aa input[type="text"]:disabled {
        background: red;
        cursor: pointer;
    }
    </style>
</head>

<body>
    <input type="text" name="name">
    <input type="text" name="age">
    <input type="checkbox">111
    <input type="checkbox">222
    <input type="checkbox">333
    <div class="aa">
        <input type="text" name="name" id="t1">
        <input type="text" name="age" id="t2" disabled>
    </div>
</body>

</html>

5.通用兄弟选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>通用兄弟选择器</title>
    <style type="text/css">
    /*跟在div后面的p元素*/
    div~p {
        background: gold;
    }

    </style>
</head>

<body>
    <div>
        <div>
            <p>div的子元素p</p>
            <p>div的子元素p</p>
        </div>
        <p>div相邻元素p</p>
        <p>div相邻元素p</p>
        <h4>----------</h4>
        <div>
            <p>div的子元素p</p>
        </div>
        <p>div相邻元素p</p>
        <p>div相邻元素p</p>
    </div>
    <p>div相邻元素p</p>
    <p>div相邻元素p</p>
</body>

</html>