简单选择器

<!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>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：可能是新报名的学员吧, 下次记得将运行截图发上来

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

flex弹性盒容器相关属性使用案例

2020-07-05 20:08:03