035.属性选择器( = 是绝对等于 , *= 是包含这个元素 , ^= 以这个开头 , $= 以这个结尾)


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

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2021-11-23title>
        <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">1a>
            <a href="#" class="links item active" target="_blank" title="test">2a>
            <a href="拼多多首页导航布局.html" class="links item ">3a>
            <a href="#" href="拼多多首页导航布局.html" class="links item ">4a>
            <a href="#" class="links item ">5a>
            <a href="#" class="links item ">6a>
            <a href="#" class="links item ">7a>
            <a href="#" class="links item ">8a>
            <a href="#" class="links item ">9a>
            <a href="#" class="links item ">10a>
        p>
    body>
html>
CSS