CSS属性选择器_使用属性选择器更改269链接中的数字-CSDN博客

本文链接：https://blog.csdn.net/qishi45/article/details/117022033

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo a{
            float: left;            /*向左浮动*/
            display: block;         /*display 属性规定元素应该生成的框的类型*/
            height: 50px;
            width: 50px;
            border-radius: 25px;    /*添加圆角边框*/
            background: #7ce5f3;    /*背景颜色*/
            text-align: center;     /*text-align 属性规定元素中的文本的水平对齐方式，center：把文本排列到中间。*/
            color: #927b46;
            text-decoration: none;  /*去掉下划线*/
            line-height: 50px;      /*line-height 属性设置行间的距离（行高）（不允许使用负数）*/
        }

        /*     标签名[属性名]{}   标签名[属性名=属性值（正则）]{}     a[]{}*/

        a[id]{                   /*存在id属性的元素*/
            background: aquamarine;
        }

        a[id=last]{             /*id=first的元素*/
            background: khaki;
        }

    /*    a[class*="links"]{       /*class中有links的元素 （id不需要引号是因为id唯一）*/
    /*        background: #98be3e ; */
    /*    }  */

    /*      
            =是绝对等于
            *是通配符     *=包含这个元素
            ^=  以...开头
            $=  以...结尾
    */

        a[href^=http]{           /*选中href中以http开头的元素*/
            background: black;
        }

        a[href$=pdf]{           /*选中href中以pdf结尾的元素*/
            background: brown;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.jpg" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.html" class="links item">5</a>
    <a href="abc">6</a>
    <a href="/a.pdf">7</a>
    <a href="http://www.baidu.com">8</a>
    <a href="www.gugu.net">9</a>
    <a href="abcd.doc" class="links item last" id="last">10</a>
</p>
</body>
</html>

在这里插入图片描述