文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS中的层级选择器如何使用

2024-04-02 19:55

关注

这篇文章主要介绍“CSS中的层级选择器如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS中的层级选择器如何使用”文章能帮助大家解决问题。

CSS中的层级选择器如何使用

层级选择器

CSS层级选择器 是根据HTML节点树之间的关系提供的选择器用法,所以说如果想要很好的学习层级选择器 首先要搞清楚HMTL元素之间的关系是什么样子的。

先看下面这段HTML代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML测试代码</title>
</head>

<body>
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <span></span>
        <button></button>
        <span></span>
    </div>
</body>

</html>

将如上代码可以画成如下节点树,如下图所示

CSS中的层级选择器如何使用

现在来我们看一个HTML元素之间的关系,在HTML页面中元素之间的关系存在着如下所示的三种关系:

层级选择器种类

根据HTML元素之间的3种关系,CSS的层级选择器提供了如下4种用法:

选择符

CSS提供的4个选择符,对应着CSS层级选择题的四种用法,如下所示

在Web开发中,用的较多的是前两个-后代选择器子选择器

我们先来看一段代码:

<!DOCTYPE html>
        <html>
          <head>
            <meta charset="utf-8">
            <title>使用CSS3层次选择器</title>
            <style type="text/css">
              * {margin:0;padding:0;}
              body {width: 300px; margin:0 auto;}
              div{margin:5px;padding:5px;border:1px solid #ccc;}
            </style>
          </head>
          <body>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4
              <div>5</div>
              <div>6</div>
            </div>
            <div>7
              <div>8
                <div>9
                  <div>10</div>
                </div>
              </div>
            </div>
          </body>
        </html>

CSS中的层级选择器如何使用

后代选择器

用来选择某个元素的所有的后代元素,比如上面的html中,使用如下的样式,会产生什么效果呢?

body div { background-color: yellow; }

这里将body元素的后代div元素设置背景色为yellow。也就是说,所有的div都被染上了黄色。

CSS中的层级选择器如何使用

子选择器

用于选择某个元素下(可能是多个元素)所有的一级子元素。比如,我们使用下面的选择器及样式,会有什么效果呢?

body > div { background-color: red; }

这样设置后,body下的一级div元素,这里是内容为1、2、3、4、7的div元素设置背景色为红色。

CSS中的层级选择器如何使用

相邻兄弟选择器

用于选取某个(或某些)元素同级目录下的下一个元素。比如,这里我们使用下面样式设置后的效果是什么样的呢?

.active + div { background-color: green; }

这里我们设置了.active选择器的相邻兄弟节点,也就是第二个div元素,将其背景色设置为了绿色。

CSS中的层级选择器如何使用

通用兄弟选择器

用于选取某个(或某些)元素的同级目录下所有的后面的标记。它和相邻兄弟选择器类似,需要在同一个父元素中。

比如使用下面的代码,影响到的样式:

.active ~ div { background-color: pink; }

这里将类名为"active"的元素(这里为第一个div)的通用兄弟(这里是内容为2、3、4、7的div)设置了背景色为粉红色。

CSS中的层级选择器如何使用

关于“CSS中的层级选择器如何使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯