• 什么是关系选择器

    目录

    父元素：

    子元素：

    祖先元素：

      后代元素：

    兄弟元素：

     子元素选择器：

    后代元素选择器：

     选择下一个兄弟：

     选择下边所有的兄弟

    父元素：

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

    子元素：

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

    祖先元素：

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

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

      后代元素：

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

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

    兄弟元素：

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

    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>

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

  • 相关阅读:
    C# 中的“智能枚举”：如何在枚举中增加行为
    oracle在Windows正常使用需要启动哪些服务
    SSM房屋租赁系统
    中勒索病毒怎么处理想恢复数据
    【JavaEE基础与高级 第61章】Java中的注解和元注解的介紹使用、注解解析
    IPWorks EDI Translator Delphi Edition
    【剑指 Offer】矩阵中的路径
    基于node.js+Vue学院会议纪要管理系统 element
    【2022CSPJ普及组】T1.第一题乘方pow
    Android中Gradle的使用
  • 原文地址：https://blog.csdn.net/m0_65334415/article/details/127383339