结构伪类选择器

最新推荐文章于 2022-07-22 18:31:33 发布

萌新彭于晏

最新推荐文章于 2022-07-22 18:31:33 发布

阅读量262

点赞数

本文链接：https://blog.csdn.net/weixin_43555093/article/details/88654989

版权

1.匹配父元素下面的第一个子元素
匹配规则:
父级选择器 :first-child
需注意在选择器后面有一个空格

    <style>
        ul :first-child{
            color:purple;
        }
    </style>

2.匹配父元素下面的最后一个子元素
匹配规则:
父级选择器 :last-child:
同样需注意在选择器后面有一个空格

        ul :last-child{
            color:red;
        }

3,匹配指定的那个子元素
父级选择器 :nth-child()
注:(1)括号里面指定的是那个子元素在父元素中的占位值/索引值(索引值可看做第几个元素)
(2)可以让其指定倍数的变化
如:ul :nth-child(2n) 可以匹配ul下的偶数的子元素(2倍的子元素)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        /*ul :first-child{*/
            /*color:purple;*/
        /*}*/
        /*ul :last-child{*/
            /*color:red;*/
        /*}*/
        ul :nth-child(3){
            color:red;
        }
        ul :nth-child(2n){
            color:blue;
        }
    </style>
</head>
<body>
<ul>
    <li>德也狂生也</li>
    <li>偶然间,淄尘京国,乌衣门第</li>
    <li>有酒唯浇赵州土,谁会成生此意</li>
    <li>不信道,遂成知己</li>
    <li>青眼高歌俱未老</li>
    <li>向樽前,拭尽英雄泪</li>
    <li>君不见,月如水</li>
</ul>
</body>
</html>

4.匹配空元素
匹配规则:
:empty
注:匹配到的元素中不能有任何东西(子元素,空格,文本等等),只能是首标签和尾标签紧紧相连的才能成功匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        div{
            width:20px;
            height:20px;
            border: 1px solid #000;
            /*给div一定的大小方便观看结果*/
        }
        div:empty{
            background-color: #ff0;
        }
    </style>
</head>
<body>
<div></div>
<hr>
<div> </div>
<hr>
<div>
    <span>啦啦啦</span>
</div>
</body>
</html>

5.匹配唯一子元素
匹配规则:
父级选择器 :only-child
注:匹配的是父级选择器下面只有一个子元素的地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        div :only-child{
            color:orange;
        }
    </style>
</head>
<body>
<div>烛花摇影,冷透书衾刚欲醒.待不思量,不许孤眠不断肠</div>
<hr>
<div>
</div>
<hr>
<div>
    <span>茫茫碧落.天上人间情一诺.银汉难通,稳耐风波愿始从.</span>
</div>
<div>
    <span>span</span>
    <i>div中的i</i>
</div>
</body>
</html>

6.匹配第一个字
匹配规则:
父级子元素:first-letter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        div:first-letter{
            font-size:30px;
            color:purple;
            font-weight:bold;

        }
    </style>
</head>
<body>
<div>人生若只如初见,何事秋风画悲扇?等闲变却故人心,却道故人心易变</div>
</body>
</html>

7.匹配第一行
匹配规则:
父级子元素:first-line

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
       div:first-line{
           font-size:20px;
           color:gray;
       }
    </style>
</head>
<body>
<div>
   知己一人谁是?已矣.赢得误他生.有情终古似无情.别语悔分明.
    <br>
    莫道芳时易度,朝暮.珍重好花天.为伊指点再来缘,疏雨洗遗钿.
</div>
</body>
</html>

注:
(1)当前内容中有br 块元素,这样让文本换行的
(2)当前文本的大小改变的时候后面的内容自动跳到下一行(可以自行改变浏览器的大小观察字体变化)