035.属性选择器( = 是绝对等于 , *= 是包含这个元素 , ^= 以这个开头 , $= 以这个结尾)(035. Attribute selector (= is absolute equal to, * = contains this element, ^ = starts with this and $= ends with this))

1.属性名,属性名=属性值(正则)   = 是绝对等于  *= 是包含这个元素  ^= 以这个开头  $= 以这个结尾

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2021-11-23</title>
        <style type="text/css">
            .demo a{
                float: left;
                display: block;
                height: 50px;
                width: 50px;
                border-radius: 10px;
                background: #0000FF;
                text-align: center;
                color: #7CFC00;
                text-decoration: none;
                margin-right: 5px;
                font: bold 20px/50px Arial;
            }
            /*
            1.属性名,属性名=属性值(正则)
            =    是绝对等于
            *=   是包含这个元素
            ^=   以这个开头
            $=   以这个结尾
            */
            
            /*存在ID属性的元素把他选中   a[]{}
            a[id=first]{
                background: #FF0000;
            }
            
            a[id]{
                background: #FF0000;
            }
            */
            
    
        /*     class 中有links的元素
            a[class*="links"]{
                background: #FF0000;
            } */
            
            
        /*     选中href中以http开头的元素
            a[href^=http]{
                background: #000000;
            } */
            
            
            /*以html结尾*/
            a[href$=html]{
                background: #FFFFFF;
            }
            
            
            
        </style>
    </head>
    <body>
        <p class="demo">
            <a href="http://www.baidu.com" class="links item first" id="first">1</a>
            <a href="#" class="links item active" target="_blank" title="test">2</a>
            <a href="拼多多首页导航布局.html" class="links item ">3</a>
            <a href="#" href="拼多多首页导航布局.html" class="links item ">4</a>
            <a href="#" class="links item ">5</a>
            <a href="#" class="links item ">6</a>
            <a href="#" class="links item ">7</a>
            <a href="#" class="links item ">8</a>
            <a href="#" class="links item ">9</a>
            <a href="#" class="links item ">10</a>
        </p>
    </body>
</html>
————————

1. Attribute name, attribute name = attribute value (regular)    = Is absolutely equal to   *= It contains this element   ^= Start with this   $= End with this

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2021-11-23</title>
        <style type="text/css">
            .demo a{
                float: left;
                display: block;
                height: 50px;
                width: 50px;
                border-radius: 10px;
                background: #0000FF;
                text-align: center;
                color: #7CFC00;
                text-decoration: none;
                margin-right: 5px;
                font: bold 20px/50px Arial;
            }
            /*
            1.属性名,属性名=属性值(正则)
            =    是绝对等于
            *=   是包含这个元素
            ^=   以这个开头
            $=   以这个结尾
            */
            
            /*存在ID属性的元素把他选中   a[]{}
            a[id=first]{
                background: #FF0000;
            }
            
            a[id]{
                background: #FF0000;
            }
            */
            
    
        /*     class 中有links的元素
            a[class*="links"]{
                background: #FF0000;
            } */
            
            
        /*     选中href中以http开头的元素
            a[href^=http]{
                background: #000000;
            } */
            
            
            /*以html结尾*/
            a[href$=html]{
                background: #FFFFFF;
            }
            
            
            
        </style>
    </head>
    <body>
        <p class="demo">
            <a href="http://www.baidu.com" class="links item first" id="first">1</a>
            <a href="#" class="links item active" target="_blank" title="test">2</a>
            <a href="拼多多首页导航布局.html" class="links item ">3</a>
            <a href="#" href="拼多多首页导航布局.html" class="links item ">4</a>
            <a href="#" class="links item ">5</a>
            <a href="#" class="links item ">6</a>
            <a href="#" class="links item ">7</a>
            <a href="#" class="links item ">8</a>
            <a href="#" class="links item ">9</a>
            <a href="#" class="links item ">10</a>
        </p>
    </body>
</html>