CSS中的层次选择器

zn1231

已于 2024-10-20 14:22:24 修改

阅读量700

点赞数 5

分类专栏：前端文章标签： css 前端

于 2024-10-05 19:19:05 首次发布

本文链接：https://blog.youkuaiyun.com/zn1231/article/details/142595646

版权

前端专栏收录该内容

4 篇文章

订阅专栏

层次选择器

通常根据元素的层次关系来选择层次选择器的使用，常见的层次选择器有以下四种：

后代选择器

后代选择器的写法通常是将指定的元素按照一前一后的顺序排列，前者是祖先，后者是后代，中间用空格隔开。

使用后代选择器以后某一元素的所有后代都会发生变化。

父元素的概念：除了html之外，每个元素都有父元素，父元素里直接包裹了一层元素（不存在嵌套的元素），即子元素。它们之间的关系有些像父亲和儿子，例如代码中的body元素是p元素的父元素，那么p元素就是body元素的子元素。

后代的概念：

子元素是父元素的后代，子元素里还可以嵌套子元素，它们可以是孙子，可以是重孙子，这些元素也是后代。

举例说明：

以图中的代码为例，li元素是ul的子元素，li元素是body的孙子。

新建一个有序列表，添加一个后代选择器，网页会将body元素内的所有出现的p元素设置成背景为绿色的效果。查看以下代码，可知这某一元素就是body。当然设置的时候可以根据需要进行编写。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body p{
            background:green;
        }

    </style>
</head>
<body>
    <p>每日计划</p>
    <p>xxx</p>
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>散步</li>
        <p>...</p>
    </ul>
</body>
</html>

效果图：

我们可以看到每日计划和xxx的背景色都变成了绿色，而且包含在列表ul里的p元素的背景色也变成了绿色，而如果要给某个特定父元素的一个子元素做效果，就要使用子选择器。

子选择器

为了区别效果，除了选择器部分的代码，其他部分代码不做改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body>p{
            background:green;
        }

    </style>
</head>
<body>
    <p>每日计划</p>
    <p>xxx</p>
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>散步</li>
        <p>...</p>
    </ul>
</body>
</html>

可以看到...这段文字没有变成绿色，就可以知道使用了子选择器产生的效果是不包括除了子元素以外的后代的。

效果图：

兄弟选择器

兄弟选择器有两种，使用以后作用的元素个数不同，相邻兄弟选择器只对一个元素生效。

相邻兄弟选择器

写法是用+连接两个元素，效果只作用于指定元素下方的一个元素。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li+p{
            background:orange;
        }
    </style>
</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>散步</li>
        <p>...</p>
        <p>每日计划</p>
        <p>xxx</p>
    </ul>
</body>
</html>

通用兄弟选择器

写法是用~连接两个元素用选择器的效果作用于指定元素下方的所有某类元素。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li~p{
            background:orange;
        }
    </style>
</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>散步</li>
        <p>...</p>
        <p>每日计划</p>
        <p>xxx</p>
    </ul>
</body>
</html>

效果图：

编写选择器的代码时还可以给元素添加class属性，使用方法跟前面叙述的大同小异，因此只举一例说明。

写法是把.加在属性名前，后面接选择器符号。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .task>p{
            background:purple;
        }
    </style>
</head>
<body>
    <ul class="task">
        <li>吃饭<p>不吃饭</p></li>
        <li>睡觉</li>
        <li>散步</li>
        <p>...</p>
        <p>每日计划</p>
        <p>xxx</p>
    </ul>
</body>
</html>