CSS3属性选择器(CSS3)

约定不等于承诺〃 2023-10-03 13:31 22阅读 0赞

## CSS3属性选择器(CSS3) ##

<!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>CSS3属性选择器</title>
        <style>
            /* 必须是input 但同时具有value 这个属性 即可选择这个元素  用[]进行包含 */
            /*  input[value] {
                color: skyblue;
            } */
    
            /* 只选择type=text 文本框的input 选取出来 */
            /*    input[type=text] {
                color: gray;
            } */
    
            /*  选择首先是div 然后是具有class属性 并且属性值 必须是icon开头的这些元素 */
            div[class^=icon] {
        
                color: red;
            }
    
            section[class$=date] {
        
                color: blue;
            }
    
            div.icon1 {
        
                color: skyblue;
                /*   类选择器和属性选择器 伪类选择器 权重都是10 */
            }
        </style>
    </head>
    
    <body>
        
        
    
    
        
        
    
    
        
        
    
        <div class="icon1">小图标1</div>
        <div class="icon2">小图标2</div>
        <div class="icon3">小图标3</div>
        <div class="icon4">小图标4</div>
        <div>透明人</div>
    
    
        
        <section class="icon1-date">1</section>
        <section class="icon2-date">2</section>
        <section class="icon3-ico">3</section>
    </body>
    
    </html>