• 什么是关系选择器

    目录

    父元素：

    子元素：

    祖先元素：

      后代元素：

    兄弟元素：

     子元素选择器：

    后代元素选择器：

     选择下一个兄弟：

     选择下边所有的兄弟

    父元素：

                    直接包含子元素的元素叫做父元素

    子元素：

                    直接被父元素包含的元素是子元素

    祖先元素：

                    直接或间接包含后代元素的元素叫做祖先元素

                    一个元素的父元素也是它的祖先元素（因为父亲也算是祖先嘛）

      后代元素：

                    直接或间接被祖先元素包含的元素叫做后代元素

                    子元素也是后代元素（父亲的儿子也算是后代嘛，后代和祖先不一定是要隔很多很多辈的）

    兄弟元素：

                    拥有相同父元素的元素是兄弟元素

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <div>
    11.         <p>
    12.             <span>
    13.                 我是P元素中的span
    14.             span>
    15.         p>
    16.         <span>我是外部的span span>
    17.     div>
    18. body>
    19. html>

     子元素选择器：


    作用：

                    选中指定父元素的指定子元素

    语法

                    父元素>子元素

    如

                    为div的子元素span设置一个字体的颜色为红色（为div直接包含的span设置一个字体颜色）

     子元素可以叠加：父元素>子元素>子元素....

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div>span{
    10.             color: aqua;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15.     <div>
    16.         <p>
    17.             <span>
    18.                 我是P元素中的span
    19.             span>
    20.         p>
    21.         <span>我是外部的span span>
    22.     div>
    23. body>
    24. html>

     

    后代元素选择器：

    作用：

                    选中指定元素内的指定后代元素

    语法

                    祖先 后代（中间的是空格）

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div span{
    10.             color: aqua;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15.     <div>
    16.         <p>
    17.             <span>
    18.                 我是P元素中的span
    19.             span>
    20.         p>
    21.         <span>我是外部的span span>
    22.     div>
    23. body>
    24. html>

     选择下一个兄弟：

    语法：

                    前一个+后一个

    注意：选择下一个兄弟是选择紧挨着的，如果不是紧挨着的就不会被选中

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         p+span{
    10.             color: aqua;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15.     <div>
    16.         <p>
    17.             <span>
    18.                 我是P元素中的span
    19.             span>
    20.         p>
    21.         <span>我是外部的span span>
    22.         <span>我是外部的span span>
    23.         <span>我是外部的span span>
    24.         <span>我是外部的span span>
    25.         <span>我是外部的span span>
    26.         <span>我是外部的span span>
    27.         <span>我是外部的span span>
    28.         <span>我是外部的span span>
    29.         <span>我是外部的span span>
    30.  
    31.     div>
    32. body>
    33. html>

     选择下边所有的兄弟

    语法：

                    兄~弟

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         p~span{
    10.             color: aqua;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15.     <div>
    16.         <p>
    17.             <span>
    18.                 我是P元素中的span
    19.             span>
    20.         p>
    21.         <span>我是外部的span span>
    22.         <span>我是外部的span span>
    23.         <span>我是外部的span span>
    24.         <span>我是外部的span span>
    25.         <span>我是外部的span span>
    26.         <span>我是外部的span span>
    27.         <span>我是外部的span span>
    28.         <span>我是外部的span span>
    29.         <span>我是外部的span span>
    30.  
    31.     div>
    32. body>
    33. html>

     选择下边所有的兄弟和选择下一个兄弟都是指选择紧挨着的，如果不是紧挨着的就不会被选中

  • 相关阅读:
    rocketmq-dashboard docker部署设置账号密码
    产品需求分析师的基本职责（合集）
    python可视化模块pandas,python数据可视化软件
    温故知新，signalR、RSA加密、ConcurrentQueue队列
    ERROR (-1005)]: Host not enough! nebula无法注册元数据
    人工智能技术与自动驾驶,自动驾驶与人工智能
    flutter课程(The Complete 2021 Flutter Development Bootcamp with Dart)学习总结
    selenium对接代理与seleniumwire访问开发者工具NetWork
    2023_Spark_实验十六：编写LoggerLevel方法及getLocalSparkSession方法
    基于Springboot外卖系统07：员工分页查询+ 分页插件配置+分页代码实现
  • 原文地址：https://blog.csdn.net/m0_65334415/article/details/127383339