属性选择器

原创于 2019-03-30 20:51:15 发布 · 304 阅读

1 ·

CC 4.0 BY-SA版权

HTML与CSS 专栏收录该内容

73 篇文章

订阅专栏

本文介绍了CSS中的属性选择器，包括基本的选择拥有某项属性的标签、选择拥有特定值属性的标签等，并展示了如何使用这些选择器来针对不同情况的属性值进行样式修改。

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

属性选择器是指选择拥有某项属性的标签，并对其进行修改。

格式：

1、[attribute]：对拥有某项属性的特定标签进行修改；

2、[attribute=value]：对拥有特定值属性的标签进行修改；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        p[class] {
            color: blue;
        }

        p[class=aaa] {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<p class="aaa">我是段落1</p>
<p class="bbb">我是段落2</p>
<p class="aaa">我是段落3</p>
<p class="aaa">我是段落4</p>
<p class>我是段落5</p>
<p class="bbb">我是段落6</p>
<p class="aaa">我是段落7</p>
</body>
</html>

3、属性的取值以什么开头

[attribute|=value]：在CSS2中提出，只能识别例如a-bb的类型，像是abb以及a bb都无法识别；

[attribute^=value]：在CSS3中提出，可以识别任意形式；

4、属性的取值以什么结尾

[attribute$=value]

5、属性的取值包含某个特定的值

[attribute~=value]：在CSS2中提出，只能识别形如b a b的类型；

[attribute*=value]：在CSS3中提出，可以识别任意形式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        p[class~=a] {
            color: blue;
        }

        p[class$=b] {
            font-family: "楷体";
        }

        p[class^=a] {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<p class="a a a">我是段落1</p>
<p class="bbb">我是段落2</p>
<p class="a-a-a">我是段落3</p>
<p class="aaa">我是段落4</p>
<p class>我是段落5</p>
<p class="bbb">我是段落6</p>
<p class="aaa">我是段落7</p>
</body>
</html>