CSS 四种层次选择器

最新推荐文章于 2024-10-05 19:19:05 发布

向阳的人生

最新推荐文章于 2024-10-05 19:19:05 发布

阅读量1.5k

点赞数

分类专栏： CSS Java 文章标签： css3 层次选择器

本文链接：https://blog.csdn.net/weixin_45672377/article/details/111165903

版权

Java 同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

实例结构图

在这里插入图片描述

后代选择器

格式：元素标签{}

特点

作用域为元素所有子代标签

实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
       body p{
          background: red;
       }
    </style>
</head>
<body>
<p>h1</p>
<p>h2</p>
<p>h3</p>
<ul>
    <li><p>h4</p></li>
    <li><p>h5</p></li>
</ul>
<p>h6</p>
</body>
</html>

在这里插入图片描述

子选择器

格式：元素>标签{}

特点

作用域为元素下一子代标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
       body>p{
          background: red;
       }
    </style>
</head>
<body>
<p>h1</p>
<p>h2</p>
<p>h3</p>
<ul>
    <li><p>h4</p></li>
    <li><p>h5</p></li>
</ul>
<p>h6</p>
</body>
</html>

在这里插入图片描述

相邻兄弟选择器

格式：选中元素+标签{}

特点

作用域为同层相邻且仅下一个标签

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
       .active+p{
          background: red;
       }
    </style>
</head>
<body>
<p>h1</p>
<p class="active">h2</p>
<p>h3</p>
<ul>
    <li><p>h4</p></li>
    <li><p>h5</p></li>
</ul>
<p>h6</p>
</body>
</html>

在这里插入图片描述

通用选择器

格式：选中元素~标签{}

特点

作用域为同层且下面所有标签

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
       .active~p{
          background: red;
       }
    </style>
</head>
<body>
<p>h1</p>
<p class="active">h2</p>
<p>h3</p>
<ul>
    <li><p>h4</p></li>
    <li><p>h5</p></li>
</ul>
<p>h6</p>
</body>
</html>