CSS 选择器选择自定义属性|极客教程

CSS 选择器选择自定义属性

在CSS中，我们可以使用选择器来选择HTML元素并对其应用样式。除了常见的选择器如类选择器、ID选择器、标签选择器等，我们还可以使用自定义属性来选择元素。在本文中，我们将详细介绍如何使用CSS选择器选择自定义属性，并提供相关示例代码。

1. 使用属性选择器选择自定义属性

属性选择器是CSS中一种常见的选择器，可以根据元素的属性值来选择元素。我们可以利用属性选择器来选择自定义属性，从而对元素应用样式。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器选择自定义属性</title>
<style>
    [data-geek-docs] {
        color: red;
    }
</style>
</head>
<body>
    <p data-geek-docs="example">这是一个带有自定义属性的段营</p>
</body>
</html>

代码运行结果:

CSS 选择器选择自定义属性

在上面的示例中，我们使用属性选择器[data-geek-docs]选择带有data-geek-docs自定义属性的元素，并将其文字颜色设置为红色。

2. 使用属性选择器选择自定义属性的值

除了选择带有自定义属性的元素外，我们还可以根据自定义属性的值来选择元素。这样可以更精确地选择需要样式化的元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器选择自定义属性</title>
<style>
    [data-geek-docs="example"] {
        font-weight: bold;
    }
</style>
</head>
<body>
    <p data-geek-docs="example">这是一个带有自定义属性值为example的段营</p>
</body>
</html>

代码运行结果:

CSS 选择器选择自定义属性

在上面的示例中，我们使用属性选择器[data-geek-docs="example"]选择带有data-geek-docs自定义属性值为example的元素，并将其文字设置为粗体。

3. 使用多个属性选择器选择自定义属性

我们还可以结合多个属性选择器来选择带有多个自定义属性的元素。这样可以更灵活地选择需要样式化的元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器选择自定义属性</title>
<style>
    [data-geek-docs="example"][data-type="text"] {
        background-color: yellow;
    }
</style>
</head>
<body>
    <p data-geek-docs="example" data-type="text">这是一个带有多个自定义属性的段营</p>
</body>
</html>

代码运行结果:

CSS 选择器选择自定义属性

在上面的示例中，我们使用多个属性选择器[data-geek-docs="example"][data-type="text"]选择带有data-geek-docs自定义属性值为example和data-type自定义属性值为text的元素，并将其背景颜色设置为黄色。

4. 使用通配符属性选择器选择自定义属性

通配符属性选择器可以选择带有指定属性名的元素，而不管其属性值是什么。这样可以更加灵活地选择需要样式化的元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器选择自定义属性</title>
<style>
    [data-geek-docs^="ex"] {
        text-transform: uppercase;
    }
</style>
</head>
<body>
    <p data-geek-docs="example">这是一个带有自定义属性值以ex开头的段营</p>
</body>
</html>

代码运行结果:

CSS 选择器选择自定义属性

在上面的示例中，我们使用通配符属性选择器[data-geek-docs^="ex"]选择带有data-geek-docs自定义属性值以ex开头的元素，并将其文字转换为大写。

5. 使用属性选择器选择包含指定字符串的自定义属性值

我们还可以使用属性选择器选择包含指定字符串的自定义属性值。这样可以更加灵活地选择需要样式化的元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器选择自定义属性</title>
<style>
    [data-geek-docs*="doc"] {
        color: blue;
    }
</style>
</head>
<body>
    <p data-geek-docs="example-docs">这是一个带有自定义属性值包含doc的段营</p>
</body>
</html>

代码运行结果:

CSS 选择器选择自定义属性

在上面的示例中，我们使用属性选择器[data-geek-docs*="doc"]选择带有data-geek-docs自定义属性值包含doc的元素，并将其文字颜色设置为蓝色。

6. 使用属性选择器选择以指定字符串结尾的自定义属性值

除了选择包含指定字符串的自定义属性值外，我们还可以选择以指定字符串结尾的自定义属性值。这样可以更加灵活地选择需要样式化的元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器选择自定义属性</title>
<style>
    [data-geek-docs$="docs"] {
        font-style: italic;
    }
</style>
</head>
<body>
    <p data-geek-docs="example-docs">这是一个带有自定义属性值以docs结尾的段营</p>
</body>
</html>

代码运行结果:

CSS 选择器选择自定义属性

在上面的示例中，我们使用属性选择器[data-geek-docs$="docs"]选择带有data-geek-docs自定义属性值以docs结尾的元素，并将其文字设置为斜体。

7. 使用属性选择器选择空值的自定义属性

有时候我们需要选择自定义属性值为空的元素，这时可以使用属性选择器选择空值的自定义属性。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器选择自定义属性</title>
<style>
    [data-geek-docs=""] {
        text-decoration: underline;
    }
</style>
</head>
<body>
    <p data-geek-docs="">这是一个带有空值自定义属性的段营</p>
</body>
</html>

代码运行结果:

CSS 选择器选择自定义属性

在上面的示例中，我们使用属性选择器[data-geek-docs=""]选择带有空值的data-geek-docs自定义属性的元素，并将其文字设置为下划线。

8. 使用属性选择器选择存在自定义属性的元素

有时候我们需要选择带有某个自定义属性的元素，而不管其属性值是什么，这时可以使用属性选择器选择存在自定义属性的元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器选择自定义属性</title>
<style>
    [data-geek-docs] {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <p data-geek-docs="example">这是一个带有自定义属性的段营</p>
    <p>这是一个没有自定义属性的段营</p>
</body>
</html>

代码运行结果:

CSS 选择器选择自定义属性

在上面的示例中，我们使用属性选择器[data-geek-docs]选择带有data-geek-docs自定义属性的元素，并给其添加了边框样式。第一个段落带有自定义属性，第二个段落没有自定义属性。

9. 使用属性选择器选择不包含指定字符串的自定义属性值

除了选择包含指定字符串的自定义属性值外，我们还可以选择不包含指定字符串的自定义属性值。这样可以更加灵活地选择需要样式化的元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器选择自定义属性</title>
<style>
    [data-geek-docs!="example"] {
        background-color: lightgray;
    }
</style>
</head>
<body>
    <p data-geek-docs="another">这是一个带有自定义属性值不为example的段营</p>
    <p data-geek-docs="example">这是一个带有自定义属性值为example的段营</p>
</body>
</html>

代码运行结果:

CSS 选择器选择自定义属性

在上面的示例中，我们使用属性选择器[data-geek-docs!="example"]选择带有data-geek-docs自定义属性值不为example的元素，并将其背景颜色设置为浅灰色。

10. 使用属性选择器选择自定义属性值为特定值或为空值的元素

有时候我们需要选择自定义属性值为特定值或为空值的元素，这时可以使用属性选择器选择自定义属性值为特定值或为空值的元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器选择自定义属性</title>
<style>
    [data-geek-docs="example"], [data-geek-docs=""] {
        font-size: 20px;
    }
</style>
</head>
<body>
    <p data-geek-docs="example">这是一个带有自定义属性值为example的段营</p>
    <p data-geek-docs="">这是一个带有空值自定义属性的段营</p>
</body>
</html>

代码运行结果:

CSS 选择器选择自定义属性