【Css】Css有关html“元素选择器”的语法合集（示例）

最新推荐文章于 2024-03-17 22:33:37 发布

敦厚的曹操

最新推荐文章于 2024-03-17 22:33:37 发布

阅读量641

点赞数

分类专栏： 5.【css】 4.【html】文章标签： html css 选择器

本文链接：https://blog.csdn.net/dxnn520/article/details/122127683

版权

5.【css】同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

4.【html】

83 篇文章 1 订阅

订阅专栏

一、元素选择器

<!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>
</head>

<style>


    /* -- 通过元素名称来统一选择设定 -- */

    p{color: brown;}

    /* -- 一个class两个名称的选择设定 -- */

    .a{color: blue;}
    .b{color:green;}  /*  2个CLASS名称，按先后顺序执行   */
    .b.c{color: cyan;}  /* 多个class名称，可以一起选择设定*/

    /* -- 元素名称+class名称的选择设定 -- */

    p.c{
        color:coral;
    }

    /* -- 多个元素可以放在一起选择设定,用【,】号 -- */
        
    h1,div,.line,p.d{color:red;}

   

    /* -- 父元素选择器(上一级元素) -- */



    /* -- 子元素选择器（下一级元素） -- */

        div.box1>h3{
            color:rgb(118, 96, 197);
        }

        /* 找向下某一级的元素  */
        
            div.box1>div>h3{
                color:rgb(51, 122, 42);
            }

    /* -- 祖先元素选择器（上n级元素） -- */

    /* -- 后代元素选择器（下n级元素） -- */

        div.box2 h3{
            color:rgb(235, 127, 77);
        } 

    /* -- 兄弟元素选择器（同级元素） -- */

    .box3 h2+h4{color:chartreuse;}  /* 紧挨着下一个元素（无效） */
    .box3 h2+div{color:chartreuse;}  /* 紧挨着下一个元素（有效） */

    .box3 h2~h4{color:rgb(233, 10, 203);}  /* 选择下边所有兄弟元素 */
    .box3 h2~div{color:rgb(233, 10, 203);}  /* 选择下边所有兄弟元素 */



</style>



<body>
        
    <H1> 李白的诗</H1>
    <div>-----------------------</div>
    <div class="line">==================</div>

    <p class="a b c">白日依山尽 </p>
    <p class="a">黄河入海流 </p>
    <p class="c">欲穷千里目 </p>
    <p class="d">更上一层楼 </p>

    <div>==================</div>

<div class="box1">

    <h2>============ box1</h2>
    <h3> 111111111</h3>
    <h3> 222222222</h3>
    <h3> 333333333</h3>
    <h3> 444444444</h3>

    <div>
          <h3>后代元素</h3>          
    </div>
</div>

<div class="box2">

    <h2>============ box2</h2>
    <h3> 111111111</h3>
    <h3> 222222222</h3>
    <h3> 333333333</h3>
    <h3> 444444444</h3>

    <div>
          <h3>后代元素</h3>          
    </div>
</div>

<div class="box3">

    <h2>============ box3</h2>
    <div>紧挨着</div>
    <h4 class="ddd"> 111111111</h4>
    <h4> 222222222</h4>
    <h4> 333333333</h4>
    <h4> 444444444</h4>

    <div>
          <h3>后代元素</h3>          
    </div>
</div>


<div>
    <ul>
        <li>
            <a href="#" class="active">1</a>
        </li>
        <li>
            <a href="#">2</a>
        </li>
    </ul>
</div>

</body>
</html>