【CSS】关系选择器

最新推荐文章于 2024-05-16 21:41:01 发布

luckyboy!

最新推荐文章于 2024-05-16 21:41:01 发布

阅读量2.5k

点赞数 2

分类专栏：前端 HTML5 HTML 文章标签： python pandas 数据分析

本文链接：https://blog.csdn.net/m0_57051895/article/details/126431401

版权

前端同时被 3 个专栏收录

13 篇文章 5 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

HTML5

4 篇文章 0 订阅

订阅专栏

文章目录

一、关系选择器是什么？

关系选择器是能够根据其它元素的关系选择适合的元素选择器。关系选择器分为子元素选择器、后代选择器、下一个兄弟选择器、下面所有兄弟选择器。

二、关系选择器

1.子元素选择器

作用：通过指定的父元素找到指定的子元素

语法：父元素>子元素{}

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style>
        /* 子元素选择器 */
       /* 选择 p 标签里的 span 标签，文字设置红色 , 字体加粗，字体大小20px*/
       p>span{
           color: red;
           font-weight: bold;
           font-size: 20px;
       }
    </style>
</head>
<body>
    <center>
        <h1>《春晓》</h1>
        <p>孟浩然<span>·唐</span></p>
        <h4>春眠不觉晓，
            <p>处处闻啼鸟。</p>
            <p>夜来风雨声，</p>
            <span>花落知多少。</span>
        </h4>
    </center>
</body>
</html>

运行结果如下：

2.后代选择器

作用：通过指定的祖先元素找到指定的子元素

语法：父元素子元素{}（父元素和子元素中间空格）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style>
        /* 子元素选择器 */
       /* 选择 p 标签里的 span 标签，文字设置红色 , 字体加粗，字体大小20px*/
       p>span{
           color: red;
           font-weight: bold;
           font-size: 20px;
       }
       /* 后代选择器 */
       /* 选择父元素 h4 标签下的子元素 span 标签 设置背景色蓝色 */
       h4 span{
           background-color: blue;
       }
    </style>
</head>
<body>
    <center>
        <h1>《春晓》</h1>
        <p>孟浩然<span>·唐</span></p>
        <h4>春眠不觉晓，
            <p>处处闻啼鸟。</p>
            <p>夜来风雨声，</p>
            <span>花落知多少。</span>
        </h4>
        
        
    </center>
</body>
</html>

运行结果如下：

3.下一个兄弟选择器

作用：选择与当前元素紧挨着的下一个同级元素

语法：兄+第{}

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style>
        /* 子元素选择器 */
       /* 选择 p 标签里的 span 标签，文字设置红色 , 字体加粗，字体大小20px*/
       p>span{
           color: red;
           font-weight: bold;
           font-size: 20px;
       }
       /* 后代选择器 */
       /* 选择父元素 h4 标签下的子元素 span 标签 设置背景色蓝色 */
       h4 span{
           background-color: blue;
       }
       /*下一个兄弟选择器 */
       /* 选择 h1 标签下 紧挨着的  p 标签， 设背景色绿色，字体颜色白色 */
       h1+p{
           background-color: green;
           color: white;
       }
    </style>
</head>
<body>
    <center>
        <h1>《春晓》</h1>
        <p>孟浩然<span>·唐</span></p>
        <h4>春眠不觉晓，
            <p>处处闻啼鸟。</p>
            <p>夜来风雨声，</p>
            <span>花落知多少。</span>
        </h4>
        
        
    </center>
</body>
</html>

运行结果如下：

4.下面所有兄弟选择器

作用：选择当前元素下的所有同级元素

语法：兄~弟{}

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style>
        /* 子元素选择器 */
       /* 选择 p 标签里的 span 标签，文字设置红色 , 字体加粗，字体大小20px*/
       p>span{
           color: red;
           font-weight: bold;
           font-size: 20px;
       }
       /* 后代选择器 */
       /* 选择父元素 h4 标签下的子元素 span 标签 设置背景色蓝色 */
       h4 span{
           background-color: blue;
       }
       /*下一个兄弟选择器 */
       /* 选择 h1 标签下 紧挨着的  p 标签， 设背景色绿色，字体颜色白色 */
       h1+p{
           background-color: green;
           color: white;
       }
       /* 下面所有兄弟选择器 */
       /* 选中h4标签下面的所有标签 ,设置背景颜色黑色，字体颜色白色*/
       h4~span{
           background-color: black;
           color: white;
       }
    </style>
</head>
<body>
    <center>
        <h1>《春晓》</h1>
        <p>孟浩然<span>·唐</span></p>
        <h4>春眠不觉晓，</h4>
        <span>处处闻啼鸟。</span>
        <span>夜来风雨声，</span>
        <span>花落知多少。</span>
        
    </center>
</body>
</html>

运行结果如下：