6、CSS属性选择器

CSS属性选择器

属性选择器：利用标签的属性对样式的生效对象进行选择。

我们在基本选择器中学过class选择器和id选择器，它们也是标签中的属性，只是因为这两个使用频率很高，因此把它们抽离出来作为两种独立的选择器。

我们如果想利用其他系统自带的属性去选择样式的生效对象，那么就使用属性选择器。



格式一：基本选择器[属性] {声明}

意义：在 基本选择器 后面用 [ ] 带上属性，表示 带有 这个属性 的 选择器 所对应的元素 使用这个声明中的样式。

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <link rel="stylesheet" href="css-attribute-selector.css">
</head>
<body>
    <div>
        div1
        <p>p2</p>
        <ul>
            <li>
                <p>p3</p>
            </li>
        </ul>
    </div>
    <p title="paragraph01">p1</p>
</body>
</html>

    css

    p[title] {
    background: green;
    color: red;
    font-size: 60px;
}

    效果：

    这里只有内容“p1”所在的标签中带有title属性，因此只有它使用了样式。





格式二：基本选择器[属性=属性值] {声明}

意义：在 基本选择器 后面用 [ ] 带上属性和属性值，表示 带有 这个属性和对应属性值 的 选择器 所对应的元素 使用这个声明中的样式。

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <link rel="stylesheet" href="css-attribute-selector.css">
</head>
<body>
    <div>
        div1
        <p>p2</p>
        <ul>
            <li>
                <p title="paragraph03">p3</p>
            </li>
        </ul>
    </div>
    <p title="paragraph01">p1</p>
</body>
</html>

    css

    p[title=paragraph01] {
    background: green;
    color: red;
    font-size: 60px;
}

    效果：

    这里内容”p1“和”p3“所对应的元素都有title属性，但是只有”p1“的属性值是paragraph01，所以只有”p1“使用了样式。





格式三：基本选择器[属性~=属性值] {声明}

意义：在 基本选择器 后面用 [ ] 带上属性和属性值，并在 属性与属性值之间的 ”=“ 前，加上 ”~“ ，表示 带有 这个属性 且属性的多个属性值中 有一个是对应属性值 的 选择器 所对应的元素 使用这个声明中的样式。

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <link rel="stylesheet" href="css-attribute-selector.css">
</head>
<body>
    <div>
        div1
        <p>p2</p>
        <ul>
            <li>
                <p title="paragraph03 pp">p3</p>
            </li>
        </ul>
    </div>
    <p title="paragraph01 pp">p1</p>
</body>
</html>

    css

    p[title~=paragraph01] {
    background: green;
    color: red;
    font-size: 60px;
}

    效果：

    这里只有内容”p1“所对应的元素的title属性的两个属性值之中，有一个属性值是paragraph01，因此只有它使用了样式。





格式四：基本选择器[属性^=属性值] {声明}

意义：在 基本选择器 后面用 [ ] 带上属性和属性值，并在 属性与属性值之间的 ”=“ 前，加上 ”^“ ，表示 带有 这个属性 且属性的多个属性值中 是以对应属性值开头 的 选择器 所对应的元素 使用这个声明中的样式。

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <link rel="stylesheet" href="css-attribute-selector.css">
</head>
<body>
    <div>
        div1
        <p>p2</p>
        <ul>
            <li>
                <p title="paragraph03 pp">p3</p>
            </li>
        </ul>
    </div>
    <p title="paragraph01 pp">p1</p>
</body>
</html>

    css

    p[title^=paragraph] {
    background: green;
    color: red;
    font-size: 60px;
}

    效果：

    这里内容”p1“所对应的元素的title属性的属性值是paragraph01 pp，

    ”p3“所对应的元素的title属性的属性值是paragraph03 pp，

    两个都是以paragraph开头的，都符合属性选择器的要求，因此两个都使用了样式。





格式五：基本选择器[属性$=属性值] {声明}

意义：在 基本选择器 后面用 [ ] 带上属性和属性值，并在 属性与属性值之间的 ”=“ 前，加上 ”$“ ，表示 带有 这个属性 且属性的多个属性值中 是以对应属性值结束 的 选择器 所对应的元素 使用这个声明中的样式。

  • 代码

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <link rel="stylesheet" href="css-attribute-selector.css">
</head>
<body>
    <div>
        div1
        <p>p2</p>
        <ul>
            <li>
                <p title="paragraph03 jjpp">p3</p>
            </li>
        </ul>
    </div>
    <p title="paragraph01 kkpp">p1</p>
</body>
</html>

    css

    p[title$=pp] {
    background: green;
    color: red;
    font-size: 60px;
}

    效果：

    这里内容”p1“所对应的元素的title属性的属性值是paragraph01 kkpp，

    ”p3“所对应的元素的title属性的属性值是paragraph03 jjpp，

    两个都是以pp结束的，都符合属性选择器的要求，因此两个都使用了样式。

posted @ 2021-03-06 16:05  丨Mr丨C  阅读(90)  评论(0)    收藏  举报