属性选择器

最新推荐文章于 2024-07-06 20:00:00 发布

十友九

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量122

点赞数

分类专栏：选择器文章标签： html

本文链接：https://blog.csdn.net/weixin_43778556/article/details/106128824

版权

选择器专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style type="text/css">
        a{
            text-decoration: none;
            color: #000;
        }
        p{
            height: 50px;
            line-height: 50px;
        }
        /*开头匹配  ^=*/
        a[href^="page2"]{
            color: red;
        }
        /*结尾匹配  $=*/
        a[href$="page2"]{
            color: green;
        }
        /*任意匹配  *=*/
        a[href*="page2"]{
            color: blue;
            font-weight: bold;
        }
        /*有匹配  不需要书写属性值*/
        img{
            width: 200px;
            border: 10px solid #000;
        }
        img[alt]{
            border-color: orange;
        }

        /*属性选择器可以不写标签名*/
        /*属性选择器也可以连续交集*/
        [alt][src="../image/b.png"]{
            border-color: blue;
        }
    </style>
</head>
<body>
    <p>
        <a href="page1/1.html">page1/1.html</a>
    </p>
    <p>
        <a href="page2/1.html">page2/1.html</a>
    </p>
    <p>
        <a href="page1/1.page2">page1/1.page2</a>
    </p>
    <img src="../../image/a.png" alt="提示">
    <img src="../../image/a.png">
    <img src="../../image/a.png" alt="">
    <img src="../../image/b.png" alt="">
</body>
</html>