No.19 CSS--关系选择器

一、关系选择器分类

  • 后代选择器
  • 子代选择器
  • 相邻兄弟选择器
  • 通用兄弟选择器

1.1 后代选择器（E F{ }）

  • ol标签下的所有li标签
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol li{
            color: aqua;
        }
    </style>
</head>
<body>
    <ol>
        <li>pingguo</li>
            <ul>
                <li>dapignguo</li>
                <li>xiaopignguo</li>
            </ul>
        <li>xiangjiao</li>
        <li>magnguo</li>
    </ol>
</body>

1.2 子代选择器（E>F{ }）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol>li{
            color: aqua;
        }
    </style>
</head>
<body>
    <ol>
        <li>pingguo</li>
            <ul>
                <li>dapignguo</li>
                <li>xiaopignguo</li>
            </ul>
        <li>xiangjiao</li>
        <li>magnguo</li>
    </ol>
</body>

　

 1.3 相邻兄弟选择器（E+F{ }）

  • 　选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素。
  • 只能向下寻找。
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1+p{
            color: aqua;
        }
    </style>
</head>
<body>
    <h1>yuansu</h1>
    <p>第一段</p>
    <p>第二段</p>
</body>

　

 

1.4 通用兄弟选择器（E~F{ }）

  • 选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开。
  • 只能向下寻找。
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1~p{
            color: aqua;
        }
    </style>
</head>
<body>
    <h1>yuansu</h1>
    <p>第一段</p>
    <p>第二段</p>
</body>

</html>

 

　　

 

 

 

 

　

 

　　

 

posted @ 2025-02-27 09:43  百里屠苏top  阅读(15)  评论(0)    收藏  举报