后代、子代、兄弟、属性选择器

学习最大

已于 2024-01-17 16:20:23 修改

阅读量376

点赞数 7

分类专栏： css选择器文章标签：前端 html css

于 2024-01-17 16:19:05 首次发布

本文链接：https://blog.csdn.net/m0_62583212/article/details/135625407

版权

css选择器专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.后代选择器

作用：选择指定元素中，符合要求的后代元素。

语法：选择器1 选择器2...（先写祖先，后写后代）

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{
            color: orange;
        }
        ol li{
            color:pink;
        }
        ul li a{
            color: green;
        }
        ol a{
            color: hotpink;
        }
        .subject li{
            color: indigo;
        }
        .subject li.font{
            color:blue;
        }
        .subject div.font{
            color:red;
        }
    </style>
</head>

<body>
    <ul>
        <li>喝奶茶</li>
        <li>吃炸鸡</li>
        <li>
        <a href="#">吸果冻</a>
        </li>
    </ul>
    <hr>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>
        <a href="#">王五</a>
        </li>
    </ol>
    <hr>
    <ol class="subject">
        <li class="font">java</li>
        <div class="font">非代码类</div>
        <li>前端</li>
        <li>phython</li>
    </ol>
</body>

</html>

效果：

2.子代选择器

作用：选择指定元素中，符合要求的子代元素。

语法：选择器1>选择器2>选择器3...

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>a{
            color: aquamarine;
        }
        div>p>a{
            color: blueviolet;
        }
        div.foot>a{
            color: brown;
        }

    </style>
</head>
<body>
    <div>
        <a href="#">张三</a>
        <a href="#">李四</a>
        <a href="#">王五</a>
        <p>
            <a href="#">赵六</a>
            <div class="foot">
                <a href="#">瓦美好给你</a>
            </div>
        </p>
    </div>
</body>
</html>

效果：

3.兄弟选择器

相邻兄弟选择

作用：选中指定元素后，符合条件的相邻兄弟元素。

语法:选择器1+选择器2{}

通用兄弟选择

作用：选中指定元素后，符合条件的所有兄弟元素。

语法:选择器1~选择器2{}

两种兄弟的选择，选择的都是下面的兄弟

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择紧紧相连的兄弟，向下选择*/
        /* div+p{
            color: brown;
        } */
          /* 选择所有兄弟*/
        div~p{
            color: brown;
        }
        li+li{
            color: cadetblue;
        }
        /* li~li{
            color: cadetblue;
        } */

    </style>
</head>

<body>
    <div>java</div>
    <p>html</p>
    <p>css</p>
    <p>javaScript</p>
    <p>UI</p>
    <ul>
        <li>你好</li>
        <li>不好</li>
        <li>好的</li>
    </ul>

</body>

</html>

效果：

4.属性选择器

作用：选择属性值符合一定要求的元素

语法：

【属性名】
【属性名=“值”】等于
【属性名^=“值”】以值开头
【属性名$=“值”】以值结尾
【属性名*=“值”】包含值

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择title属性的元素 */
        /* [title]{
            color: cadetblue;
        } */
        /*选择title属性且属性值为lili1的元素   */
        /* [title="lili1"]{
            color: cadetblue;
        }  */
      /*选择title属性且属性值以b开头的元素   */
        /* [title^="b"]{
            color: cadetblue;
        }  */
         /*选择title属性且属性值以li结尾的元素   */
         /* [title$="li"]{
            color: cadetblue;
        }   */
           /*选择title属性且属性值有li的元素   */
         [title*="li"]{
            color: cadetblue;
        }  
    </style>
</head>
<body>
    <div title="bili1">哔哩哔哩1</div>
    <div title="bili2">哔哩哔哩2</div>
    <div title="lili">哔哩哔哩3</div>
    <div title="lili">哔哩哔哩4</div>
</body>
</html>

效果：