任务2-4(目标选择器&结构性伪类选择器&CSS变量)

weixin_46137837

于 2021-08-08 17:02:31 发布

阅读量107

点赞数

文章标签： css3 html 前端

本文链接：https://blog.csdn.net/weixin_46137837/article/details/119516137

版权

新的选择器

1. 目标选择器
2. 结构性伪类选择器
3. CSS变量

1. 目标选择器

子代选择器: >
兄弟选择器: +
针对的是向下寻找紧挨着的元素
同级选择器: ~
针对的是向下寻找元素
属性选择器: [属性名]

<body>
    <ul class="first">
        <li>item0</li>
        <h1>item</h1>
        <p>这里是个p标签</p>
        <li>item1</li>
        <li>item2</li>
        <div>
            <ul id="second">
                <li>second-item1</li>
                <li>second-item2</li>
                <li>second-item3</li>
                <li>second-item4</li>
                <li>second-item5</li>
            </ul>
        </div>
        <li id="li3">item3</li>
        <li id="li4">item4</li>
        <li>item5</li>
    </ul>
</body>

1.1子代选择器:

.first>li {
            /*子代选择器*/
            color: gold;
        }

在这里插入图片描述

1.2 兄弟选择器

li+li{
            /*兄弟选择器*/
            /*针对的是向下寻找紧挨着的元素*/
            color: red;
        }

在这里插入图片描述

1.3 同级选择器

h1~li {
           /*同级选择器
            针对的是向下寻找元素*/
            color: cyan;
        }

在这里插入图片描述

1.4 属性选择器:

[id="li3"] {
            color: red;
        }

在这里插入图片描述

2. 结构性伪类选择器

nth-child(N)
选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
nth-of-type(N) 推荐使用
选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
first-child
last-child

3. CSS变量

在这里插入图片描述

weixin_46137837

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
任务2-4(目标选择器&结构性伪类选择器&CSS变量)

新的选择器1. 目标选择器1.1子代选择器:1.2 兄弟选择器1.3 同级选择器1.4 属性选择器:2. 结构性伪类选择器3. CSS变量1. 目标选择器子代选择器: >兄弟选择器: +针对的是向下寻找紧挨着的元素同级选择器: ~针对的是向下寻找元素属性选择器: [属性名]<body> <ul class="first"> <li>item0</li> <h1>item</
复制链接

扫一扫