迈进前端(06) CSS 选择器之层级选择器

最新推荐文章于 2024-07-21 23:25:52 发布

一碗周.

最新推荐文章于 2024-07-21 23:25:52 发布

阅读量465

点赞数

文章标签：定位 css html javascript

本文链接：https://blog.csdn.net/weixin_46163658/article/details/109658640

版权

古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。——苏轼

写在前面

本篇博客主要介绍的是 CSS 选择器中的第二个分类——层级选择器。本篇博客主要介绍 HTML 节点树的结构和 CSS 层级选择器的使用

HTML 结构树

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

先看一段 HTML 代码

<!DOCTYPE html>
<html lang="en">

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

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

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

父级与子级之间的关系：在上述代码中，左边 <div> 元素是 <p> 元素的的父级元素，反之 <p> 是 <div> 的子级元素，当然这种父子结构还有跟多。
兄弟之间的关系：在上述代码代码中，<p> 元素和 <p> 元素是兄弟元素，<span> 元素和 <button> 元素也是兄弟元素。
祖先与后代之间的关系：在上述代码代码中，<p> 元素是 <body> 元素的后代元素，反之 <body> 元素是<p> 元素的祖先元素。

层级选择器

层级选择器种类

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

后代选择器
子级选择器
相邻兄弟选择器
普通兄弟选择器

后代选择器

后代选择器是将某个元素当做祖先元素，定位该元素的所有后代元素。后代选择器的语法结构如下所示：

选择器1 选择器2 {
	属性 : 属性值;
}

上述语法结构具体说明如下：

选择器1：表示某个祖先元素。
选择器2：定位选择器1 的指定选择器2 的后代元素。
连接符：选择器1 和选择器2 之间是通过空格（）操作符进行连接的。

如下示例代码所示展示了后代选择器的具体用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后代选择器</title>
  <style>
    span {
      background-color: lightgreen;
    }

    div span {
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <div>
    <span>这是一个 span 元素
      <span>这也是一个 span 元素</span>
    </span>
  </div>
  <span>这还是一个 span 元素</span>
</body>

</html>

上述示例代码运行效果如下图所示：

小提示：后代选择器定位的元素中是包含子级选择器定位的元素的。

子级选择器

子级选择器是将某个元素当做父级元素，定位该元素的所有子级元素。子级选择器的语法结构如下所示：

选择器1>选择器2 {
	属性 : 属性值;
}

上述语法结构具体说明如下：

选择器1：表示某个父级元素。
选择器2：定位选择器1 的指定选择器2 的子级元素。
连接符：选择器1 和选择器2 之间是通过大于号（>）操作符进行连接的。

如下示例代码所示展示了子级选择器的具体用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子级选择器</title>
  <style>
    span {
      background-color: lightgreen;
    }

    div>span {
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <div>
    <span>这是一个 span 元素
      <span>这也是一个 span 元素</span>
    </span>
  </div>
  <span>这还是一个 span 元素</span>
</body>

</html>

上述示例代码运行效果如下图所示：

相邻兄弟选择器

相邻兄弟选择器是将某个元素作为目标元素，定位与该目标元素拥有同一个父级元素的下一个指定元素。相邻兄弟选择器的语法结构如下所示：

选择器1+选择器2 {
	属性 : 属性值;
}

上述语法结构具体说明如下：

选择器1：表示某个目标元素。
选择器2：定位与选择器1 拥有同一个父级元素的下一个选择器2 元素。
连接符：选择器1 和选择器2 之间是通过加号（+）操作符进行连接的。

如下示例代码所示展示了相邻兄弟选择器的具体用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后代选择器</title>
  <style>
    span {
      display: block;
      background-color: lightgreen;
    }

    .span2+.span3 {
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <div>
    <span class="span1">这是一个 span 元素
      <span class="span2">这也是一个 span 元素</span>
      <span class="span3">这还是一个 span 元素</span>
    </span>
  </div>
  <span class="span4">这也还是一个 span 元素</span>
</body>

</html>

上述示例代码运行效果如下图所示：

普通兄弟选择器

普通兄弟选择器是将某个元素作为目标元素，定位与该目标元素拥有同一个父级元素的之后任意指定元素。普通兄弟选择器的语法结构如下所示：

选择器1~选择器2 {
	属性 : 属性值;
}

上述语法结构具体说明如下：

选择器1：表示某个目标元素。
选择器2：定位与选择器1 拥有同一个父级元素的之后任意选择器2 元素。
连接符：选择器1 和选择器2 之间是通过波浪号（~）操作符进行连接的。

如下示例代码所示展示了普通兄弟选择器的具体用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>普通兄弟选择器</title>
  <style>
    div~span {
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <div>这是div元素</div>
  <p>这是p元素</p>
  <span>这是span元素</span>
</body>

</html>

上述示例代码运行效果如下图所示：

写在最后

本篇博客介绍了 HTML 的节点树和 HTML 元素之间的关系，还有后代选择器、子级选择器、相邻兄弟选择器和普通兄弟选择器等内容

一碗周.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
迈进前端(06) CSS 选择器之层级选择器

古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。——苏轼写在前面本篇博客主要介绍的是 CSS 选择器中的第二个分类——层级选择器。本篇博客主要介绍 HTML 节点树的结构和 CSS 层级选择器的使用HTML 结构树CSS 层级选择器是根据 HTML 节点树之间的关系提供的选择器用法，所以说如果想要很好的学习层级选择器首先要搞清楚 HMTL 元素之间的关系是什么样子的。先看一段 HTML 代码<!DOCTYPE html><html lang="en">&l.
复制链接

扫一扫