简单选择器

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <title>简单选择器</title>
        <style>
        /* 使用九宫格来演示: grid布局实现 */
      .continer {
        width: 300px;
        height: 300px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      .item {
        font-size: 2rem;
        background-color: lightskyblue;
        display: flex;
        justify-content: center;
        align-items: center;
      }
        /*使用标签和属性来选择元素*/
        /*元素选择器，可返回多个匹配元素*/
        a{
            color:red;
        }
        /*群组选择器，同时选择多个不同类型的元素*/
        h3,ul,li{
            background-color:green;
        }
        /*通配选择器,不区分类型，选择所有元素，*/
        *{
            /*给所有元素加上轮廓线，该线不占用空间，布局开发时经常用到*/
            outline:1px dash red;
        }
        /*属性选择器 */
        a[href="https://www.php.cn"]{
            background-color:yellow;
        }
        /* 类选择器*/
        .item{
            border:1px solid red;
        }
        /*id选择器*/
        #first{
            color:blue;
        }
        </style>
    </head>
    <body>
        <div class="continer" >
            <h3>简单选择器</h3>
            <ul>
                <li><a href="https://www.php.cn">简单选择器</a></li>
                <li>简单选择器</li>
                <li>简单选择器</li>
            </ul>
            <div class="item" id="first">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>
    </body>
</html>

上下文选择器

    <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>上下文选择器</title>
            <style>
                /*依据元素的上下文关系，选择元素*/
                /*后代选择器,选择当前元素的所有后代元素*/
                body div{
                background-color:red;
                }
                /*父子选择器，选择当前元素的所有子元素*/
                div > span{
                    color:blue;
                }
                /*同级相邻选择器，选择拥有共同父级的且相邻的下一个元素*/
                .first+ *{
                    color:red;
                }
                /*同级所有选择器，选择拥有共同父级的当前元素后面的所有元素*/
                .first~ *{
                    color:red;
                }
            </style>
        </head>
        <body>
        <div>
            <span>上下文选择器</span>
            <ul>
                <li class="first">上下文选择器</li>
                <li>上下文选择器</li>
                <li>上下文选择器</li>
                <li>上下文选择器</li>
            </ul>
        </div>
        </body>
        </html>

结构伪类选择器（分组和不分组）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类选择器</title>
    <style>
        /*依据元素的位置来选择元素，伪类选择器不用对元素添加额外的属性获取元素，其样式级别仍属于“class”级别，仍属于属性选择器的范畴，级别高于元素选择器*/
        /*不分组*/
        /*匹配第一个元素*/
        .continer>div:first-child{
            color:red;
        }
        /*匹配最后一个元素*/
        .continer>div:last-child{
            color:red;
        }
        /*选择第3个具有item属性的元素*/
        .continer> :nth-child(3){
            color:green;
        }
        /*选择偶数行的元素*/
        .continer> :nth-child(2n){
            color:blue;
        }
        /*选择奇数行的元素*/
        .continer > :nth-child(2n-1){
            background:yellow;
        }
        .continer > :nth-child(odd){
            border:1px solid red;
        }
        /*选择倒数第3个元素*/
        .continer > :nth-last-child(3){
            color:red;
        }
        /*分组*/
        /*选择class属性为item的第一个div元素*/
        .continer > div:first-of-type{
            color:red;
        }
        /*选择class属性为item的最后一个元素*/
        .continer > div:last-of-type{
            color:red;
        }
        /*取消类型限制*/
        .continer > :last-of-type{
            color:red;
        }
        /*选择class属性为item的第三个div元素*/
        .continer > div:nth-of-type(3){
            color:red;
        }
        /*选择class属性为item的倒数第一个span元素*/
        .continer > span:nth-last-of-type(1){
            color:red;
        }
        /*选择class属性为item的奇数行元素*/
        .continer > div:nth-of-type(2n-1){
            color:red;
        }
        /*选择class属性为item的偶数行元素*/
        .continer > span:nth-of-type(2n){
            color:red;
        }
    </style>
</head>
<body>
    <div class="continer">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <span class="item">6</span>
        <span class="item">7</span>
        <span class="item">8</span>
        <span class="item">9</span>
        <span class="item">10</span>
    </div>
</body>
</html>

其它伪类伪元素

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>伪类与伪元素</title>
        <style>
        #login-form{
            display:none;
        }
        /*：target:必须和id配合，实现锚点操作,表单元素锚点激活的时候执行*/
            #login-form:target{
                display:block;
            }
            /*:foucs:向拥有键盘输入焦点的元素添加样式*/
            input:focus{
                color:blue;
                background-color:green;
            }
            /*:not():选择不满足条件的元素*/
            .list>:not(nth-of-type(3)){
                color:red;
            }
            /*::before:伪元素，源码中并不存在，通过css添加。主要用于修饰某些元素，添加效果，但又不希望占用资源，通常与content属性配合使用*/
            .liste > ::before{
                content:"PHP中文网";
                color:blue;
                font-size:1.5rem;
                border-bottom:2px solid green;
            }
            /*::last:伪元素，源码中并不存在，通过css添加。主要用于修饰某些元素，添加效果，但又不希望占用资源，通常与content属性配合使用*/
            .list > ::last{
                content:"php中文网"
                color:red;
                font-size:1.5rem;
                border-bottom:2px solid green;
            }
        </style>
    </head>
    <body>
        <button onclick="location='#login-form'">点击登录</button>
        <form action="" method="post" id="login-form">
            <label for="email">邮箱:</label>
            <input type="email" name="email" id="email" />
            <label for="password">密码:</label>
            <input type="password" name="password" id="password" />
            <button>登录</button>
        </form>
        <hr/>
        <ul class="list">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
        </ul>
    </body>
</html>