属性选择器★★★★

属性选择器★★★★==

1、属性选择器格式

/*属性选择器的格式:
标签类型+[属性 select 属性值 （正则）]+{}
其中select可选项为正则表达式
=   绝对等于
*=  包含这个元素
^=  以......开头
$=  以......结尾
*/

2、属性选择器代码练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*后代选择器选择所有a标签*/
        .demo a{
            float : left;                   /*由页面左侧向右浮动*/
            display : block;                /*外观形式为方块*/
            height : 50px;                  /*高50px*/
            width : 50px;                   /*宽50px*/
            border-radius : 10px;           /*外观形式设置为圆角，圆角大小为10px*/
            background : pink;              /*背景色设置为pink*/
            text-align : center;            /*文字左右居中*/
            color : gray;                   /*字体颜色设置为gray*/
            text-decoration : none;         /*文字样式为空*/
            margin-right : 5px;             /*每个标签向右空出5px*/
            line-height : 45px;             /*在这里用作文字上下居中*/
            font : bold 20px/50px Arial;    /*文字为粗体20px上下居中*/
        }

        /*属性选择器的格式:
        标签+[属性 = "属性值" （正则）]+{}
        =   绝对等于
        *=  包含这个元素
        ^=  以......开头
        $=  以......结尾
        */

        /*选中存在id属性的元素*/
        a[id]{
            color : red;
        }
        /*选中id属性值为second的元素*/
        a[id="second"]{
            color : blue ;
        }

        /*选中class属性值包含有last的元素*/
        a[class*="last"]{
            background : orange;
        }

        /*选中href属性值以http开头的元素*/
        a[href^="http"]{
            background : wheat;
        }

        /*选中href属性值jpg结尾的元素*/
        a[href$=jpg]{
            background : gray;
            color : black;
        }

    </style>

</head>
<body>

<p class="demo">

    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc">6</a>
    <a href="/a.pdf">7</a>
    <a href="/abc.pdf">8</a>
    <a href="abc.doc">9</a>
    <a href="abcd.doc" class="links item last" id="second">10</a>

</p>

</body>
</html>