CSS3的初识(二)

最新推荐文章于 2025-06-02 22:57:16 发布

萌新彭于晏

最新推荐文章于 2025-06-02 22:57:16 发布

阅读量161

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43555093/article/details/88628469

本文主要介绍了CSS属性选择器的匹配规则，包括属性名匹配的多种情况，如[属性名]匹配具有该属性名的所有标签，选择器[属性名]更精确匹配，还有属性名与属性值的多种匹配规则，如属性名完全等于属性值、属性值包含给定值等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS的初识之属性选择器

(一)属性名匹配
(1).[属性名]
匹配规则:具有这个属性名的那些所有标签.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>x兄弟选择器</title>
    <style>
        [title]{
            color:purple;
        }
    </style>
</head>
<body>
<div>我是div1</div>
<div title="div">我是div2</div>
<span title="div">我是span</span>
</body>
</html>

在这里插入图片描述
(2).选择器[属性名]
匹配规则:具有当前属性名的那些标签(更加精确)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>x兄弟选择器</title>
    <style>
        span[title]{
            color:purple;
        }
    </style>
</head>
<body>
<div>我是div1</div>
<div title="div">我是div2</div>
<span title="div">我是span</span>
</body>
</html>

在这里插入图片描述
(3).选择器[属性名1][属性名2]
匹配规则:同时匹配具有属性名1和属性名2且符合选择器的那些标签(更更加准确).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>x兄弟选择器</title>
    <style>
        span[class][title]{
            color:yellow;
        }
    </style>
</head>
<body>
<div>我是div1</div>
<span title="div">我是span</span>
<br>
<span class="a" title="span" >我具有class和title</span>
</body>
</html>

在这里插入图片描述
(4)[属性名=‘属性值’]{样式}
匹配规则:属性名完全是这个属性值得时候匹配成功(还可以更加精确,如在前面加上其他选择器)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>x兄弟选择器</title>
    <style>
       [title='a']{
           color:orange;
        }
    </style>
</head>
<body>
<div title="a">我是diva</div>
<div title="b">我是divb</div>
</body>
</html>

在这里插入图片描述
(5)[]属性名~=完整的值]{样式}
匹配规则:属性值是一个完整的,空格表示隔开.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>x兄弟选择器</title>
    <style>
       [title~=tag]{
           color:red;
        }
    </style>
</head>
<body>
<div title="tag content mcolor">我是div</div>
<div title="tag">我也是div</div>
<span title="tag1 color">我是span</span>
<nav title="tag color">我是nav</nav>
</body>
</html>

在这里插入图片描述
(6)[属性名^=值]
匹配规则:当前的值是值得开始.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>x兄弟选择器</title>
    <style>
       [title^=b]{
           color:red;
        }
    </style>
</head>
<body>
<div title="ab ad">我是div</div>
<div title="bc ba">我也是div</div>
<span title="bb cc">我是span</span>
<nav title="box">我是nav</nav>
</body>
</html>

在这里插入图片描述
(7)[属性名$=值]
匹配规则:以当前值为结尾.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>x兄弟选择器</title>
    <style>
       [title$=a]{
           color:blue;
        }
    </style>
</head>
<body>
<div title="ab ad">我是div</div>
<div title="bc ba">我也是div</div>
<span title="bb ca">我是span</span>
<nav title="box">我是nav</nav>
</body>
</html>

在这里插入图片描述
(8).[属性名*=值]
匹配规则:只要是值中包含当前给定的值即可匹配成功.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>x兄弟选择器</title>
    <style>
       [title*=ox]{
           color: #00ffff;
        }
    </style>
</head>
<body>
<div title="ab ad">我是div</div>
<nav title="box">我是nav</nav>
</body>
</html>

在这里插入图片描述