美文网首页
CSS-----选择器

CSS-----选择器

作者: 看这里 | 来源:发表于2022-06-21 10:17 被阅读0次

    css中利用选择器选择器选取需设置样式的元素:
    1、元素选择符:

       <style>
            div{
                background-color: aqua;
                color:red;
            }
            h1{
                color:antiquewhite;
            }
        </style>
    </head>
    <body>
        <div>11111111</div>
        <div>111111111111</div>
        <h1>22222222222</h1>
    </body>
    

    2、类选择器:

       <style>
            /*两个 样式 里都有作用于同一个div,在style里就近原则 */
            .ibm{
                background-color: blue;
                color:brown 
            }
    
            .qianfeng{
                color:blueviolet;
                background-color: antiquewhite;
            }
        </style>
    </head>
    <body>
        <!-- aa,bb 为自己定义的,随便写 -->
        <div>1111111</div>
        <div class="aa bb">22222</div>
        <div class="aa">3333333</div>
        <div class="bb">4444444444</div>
        <div>555555555</div>
    </body>
    

    3、id选择器:

      <style>
            #box1{
                background-color: aqua;
            }
            #box2{
                background-color: blanchedalmond;
            }
            #box3{
                background-color: blueviolet;
            }
        </style>
    </head>
    <body>
        <!-- 只能写一个id,具有唯一性 -->
        <div id="box1">111111111111</div>
        <div id="box2">22222222222222</div>
        <div id="box3">3333333333333</div>
    

    4、通配符(清边距):

      <style>
            *{
                /* 外边距 */
                margin: 0;
                /* 内边距 */
                padding: 0;
            }
        </style>
    </head>
    <body>
        <h1>标题</h1>
        <div>1111111111</div>
        <ul>
            <li>111111</li>
            <li>22222222</li>
            <li>3333333</li>
        </ul>
    </body>
    

    5、群组选择器:

        <style>
            /* div{
                background-color: yellow;
            }
    
            p{
                background-color: yellow;
            }
            h1{
                background-color: yellow;
            } */
            
            /* 群组选择器:提出公共代码,节约代码量 */
            div,p,h1{
                background-color: yellow;
            }
            div,.aaa,h1{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>22222222222</div>
        <p class="aaa">222222222222</p>
        <h1>33333333333</h1>
    </body>
    

    6、后代选择器:

      <style>
            /*后代选择器,包含选择器 
            
            匹配原则:从右到左匹配选择*/
            div p{
                background-color: aqua;
            }
    
            p b{
                background-color: beige;
            }
        </style>
    </head>
    <body>
        <div>
            <p>111111111111</p>
        </div>
        <p>22222222222</p>
        <p>
            <b>2222222222222222</b>
        </p>
        <div>
            <b>3333333333333333</b>
        </div>
    </body>
    

    7、伪类选择器:

       <style>
            /* 顺序不能改变 link,visited,hover,active*/
    
            /* 访问前,初始状态 */
            a:link{
                color:yellow;
            }
            /* 访问之后 */
            a:visited{
                color:red;
            }
            /* 鼠标移上 */
            a:hover{
                color:orange;
            }
            /* 点击激活 */
            a:active{
             color: green;
            }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">百度</a>
    </body>
    

    相关文章

      网友评论

          本文标题:CSS-----选择器

          本文链接:https://www.haomeiwen.com/subject/qbgsvrtx.html