属性选择器

最新推荐文章于 2024-11-01 15:27:05 发布

之樾

最新推荐文章于 2024-11-01 15:27:05 发布

阅读量60

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_43021902/article/details/114638924

版权

id+class结合~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
        float:left;
        display:block;
        height:50px;
        width:50px;
        border-radius:10px;
        background:red;
        text-align:center;
        color:yellow;
        text-decoration:none;
        margin-right:5px;
        font:bold 20px/50px Arial;
        }

        /*属性名，属性名=属性值（正则)
        =绝对等于
        *=包含
        */
        /*存在id属性的元素:a[]{}
        a[id]{background:green;}*/

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

        /*class中有links的元素
        a[class*="links"]{background:yellow;}*/

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


        a[href$=jpg]{background:yellow;}
    </style>
</head>
<body>
<p class="demo">
    <a href="https://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.png"class=" links item">4</a>
    <a href="images/123.jpg"class=" links item">5</a>
    <a href="abc"class=" links item">6</a>
    <a href="/a.pdf"class=" links item">7</a>
    <a href="/abc.pdf"class=" links item">8</a>
    <a href="abc.doc"class=" links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>