CSS3中的结构伪类

最新推荐文章于 2023-01-04 10:45:00 发布

杨旭华　

最新推荐文章于 2023-01-04 10:45:00 发布

阅读量311

点赞数

本文链接：https://blog.csdn.net/Yxh666/article/details/102913519

版权

css3=css2+新语法+新的属性
就是对css2进行扩充删减优化

结构伪类

选择器	功能
E：first-child	匹配第一个孩子
E：last-child	匹配最后一个孩子
E：nth-child(n)	匹配第n个孩子
E：nth-child(2n) E : nth-child(even)	匹配偶数的孩子如： 2、4、6
E：nth-child(2n+1) E :nth-child(odd)	匹配奇数的孩子如： 1、3、5
E：only-child	匹配有且只有一个孩子

E :first-child 匹配第一个孩子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>结构伪类</title>
    <style>
        /* 使用CSS3中的结构伪类选择器来匹配元素 */
        /* 匹配第一个孩子 格式: E: first-child{属性:值;}*/
        .box ul li:first-child{
            color: #f00;
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>程序员1</li>
            <li>程序员2</li>
            <li>程序员3</li>
            <li>程序员4</li>
            <li>程序员5</li>
            <li>程序员6</li>
            <li>程序员7</li>
            <li>程序员8</li>
            <li>程序员9</li>
            <li>程序员10</li>
        </ul>
    </div>
</body>
</html>

效果图:
在这里插入图片描述
匹配第一个孩子然后给他设置属性

... ...
        .box ul li:first-child{
            color: #f00;
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #000;
        }
... ...

E :last-child 匹配最后一个孩子

... ...
        /* 匹配最后一个孩子 格式: E: last-child{属性:值;}*/
        .box ul li:last-child{
            color: #f00;
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #000;
        } 
... ...

在这里插入图片描述

E：nth-child(n)

注意：
“n”代表第几个，注意n不能填写到到 li 设置以外的值，救是说li设置了10个值，那么n就不可以写11甚至更多

... ...
        /* 匹配第n个孩子 格式: E: nth-child(n){属性:值;}*/
        .box ul li:nth-child(2){
            color:red;
            width: 100px;
            height: 40px;
            line-height: 40px;
            border: 1px solid skyblue;
        }  
... ...

匹配到第2个并给他设置样式
在这里插入图片描述

E：nth-child(2n)或 E : nth-child(even) 匹配偶数的孩子如： 2、4、6

... ...
        /* 匹配偶数的孩子 格式: E :nth-child(2n)或者E :nth-child(even){属性:值;} */
        .box ul li:nth-child(2n){
            color:red;
            background: pink;
            width: 100px;
        }  
... ...

匹配偶数的孩子并设置属性
在这里插入图片描述

... ...
        .box ul li:nth-child(even){
            color: #00f;
            background: purple;
            width: 100px;
        }
... ...

可以看到E :nth-child(even)也是匹配偶数的
在这里插入图片描述

那么有匹配偶数就有匹配奇数的，接下来就是比配奇数的

E：nth-child(2n+1) E :nth-child(odd)

... ...
         /* 匹配奇数的孩子 格式: E :nth-child(2n+1)或者E :nth-child(odd){属性:值;} */
         .box ul li:nth-child(2n+1){
            color: #0f0;
            width: 100px;
            background-color: skyblue;
         }
... ...

在这里插入图片描述
接下来用nth-child(odd)效果也是一样的，匹配奇数的孩子

... ...
.box ul li:nth-child(odd){
            color: red;
            width: 100px;
            background-color: skyblue;
        }
... ...

在这里插入图片描述

E :only-child

... ...
           <li>程序员10</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>你好vvv</li>
        </ul>
    </div>
</body>
</html>
... ...

在这里重新写一个

显示的效果
在这里插入图片描述
设置样式：

... ...
        /* 匹配有且仅有一个的孩子 格式: E :only-child{属性:值;} */
        div ul li:only-child{
            color: #0f0;
        }
        
... ...

效果如下：
在这里插入图片描述

杨旭华　

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫