CSS之属性选择器-优快云博客

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*float: left;   整体居左
        display: table;  展示情况
        height: 50px;
        width: 50px;
        border-radius: 10px;  边框
        background: blueviolet; 背景色
        text-align: center;     文本居中
        font: bold 20px/50px Arial; 字体居中
        text-decoration: none;  去除下划线 */

    .demo a {
        float: left;
        display: table;
        height: 50px;
        width: 50px;
        border-radius: 10px;
        background: blueviolet;
        text-align: center;
        font: bold 20px/50px Arial;
        text-decoration: none;

    }
/*属性名 属性名=属性值(正则)
= 表示绝对等于
*=表示包含这个元素
^= 表示以这个开头
$= 表示以这个结尾
*/
   /* a[class *= "links"]{
        background: yellow;
    }*/


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

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

    a[href$=html]{
        background: brown;
    }
</style>


<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="images/123.html" class="links item ">3</a>
    <a href="images/123.html" class="links item ">4</a>
    <a href="images/123.html" class="links item ">5</a>
    <a href="images/123.html" class="links item ">6</a>
    <a href="images/123.html" class="links item ">7</a>
    <a href="https://www.baidu.com" class="links item last" id="last">8</a>

</p>

</body>
</html>

样式介绍：
float: left; 整体居左
display: table; 展示情况
height: 50px;
width: 50px;
border-radius: 10px; 边框
background: blueviolet; 背景色
text-align: center; 文本居中
font: bold 20px/50px Arial; 字体居中
text-decoration: none; 去除下划线
属性选择器介绍
= 表示绝对等于
*=表示包含这个元素
^= 表示以这个开头
$= 表示以这个结尾

属性选择器格式
某个属性[]{}