CSS属性选择器|极客教程

CSS属性选择器

在CSS中，属性选择器是一种可以根据元素的属性值来选择元素的方法。通过属性选择器，我们可以更精确地选择需要样式化的元素，从而实现更灵活的样式控制。在本文中，我们将详细介绍CSS属性选择器的用法和示例代码。

1. 属性选择器基本语法

属性选择器的基本语法如下：

element[attribute=value] {
    /* styles */
}

其中，element表示要选择的元素，attribute表示要匹配的属性名，value表示要匹配的属性值。下面是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS属性选择器示例</title>
    <style>
        p[lang="en"] {
            color: blue;
        }
    </style>
</head>
<body>
    <p lang="en">Hello, geek-docs.com!</p>
    <p lang="fr">Bonjour, geek-docs.com!</p>
</body>
</html>

Output:

CSS属性选择器

在上面的示例中，我们使用属性选择器p[lang="en"]来选择lang属性值为en的<p>元素，并将其文字颜色设置为蓝色。因此，只有第一个<p>元素的文字颜色会被设置为蓝色。

2. 属性选择器的常见用法

2.1 精确匹配属性值

属性选择器可以精确匹配属性值，只有当属性值完全等于指定值时才会生效。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS属性选择器示例</title>
    <style>
        a[href="https://geek-docs.com"] {
            color: green;
        }
    </style>
</head>
<body>
    <a href="https://geek-docs.com">Geek Docs</a>
    <a href="https://google.com">Google</a>
</body>
</html>

Output:

CSS属性选择器

在上面的示例中，我们使用属性选择器a[href="https://geek-docs.com"]来选择href属性值为https://geek-docs.com的<a>元素，并将其文字颜色设置为绿色。

2.2 包含指定属性值

除了精确匹配属性值外，属性选择器还可以选择包含指定属性值的元素。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS属性选择器示例</title>
    <style>
        a[href*="geek-docs.com"] {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <a href="https://geek-docs.com">Geek Docs</a>
    <a href="https://google.com">Google</a>
</body>
</html>

Output:

CSS属性选择器

在上面的示例中，我们使用属性选择器a[href*="geek-docs.com"]来选择href属性值包含geek-docs.com的<a>元素，并将其文字设置为粗体。

2.3 以指定属性值开头

属性选择器还可以选择以指定属性值开头的元素。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS属性选择器示例</title>
    <style>
        a[href^="https://"] {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <a href="https://geek-docs.com">Geek Docs</a>
    <a href="http://google.com">Google</a>
</body>
</html>

Output:

CSS属性选择器

在上面的示例中，我们使用属性选择器a[href^="https://"]来选择href属性值以https://开头的<a>元素，并为其添加下划线样式。

2.4 以指定属性值结尾

属性选择器还可以选择以指定属性值结尾的元素。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS属性选择器示例</title>
    <style>
        a[href$=".com"] {
            color: red;
        }
    </style>
</head>
<body>
    <a href="https://geek-docs.com">Geek Docs</a>
    <a href="http://google.com">Google</a>
</body>
</html>

Output:

CSS属性选择器

在上面的示例中，我们使用属性选择器a[href$=".com"]来选择href属性值以.com结尾的<a>元素，并将其文字颜色设置为红色。

3. 多属性选择器

除了单个属性选择器外，我们还可以使用多属性选择器来选择同时满足多个属性条件的元素。多属性选择器的语法如下：

element[attribute1=value1][attribute2=value2] {
    /* styles */
}

下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS属性选择器示例</title>
    <style>
        a[href="https://geek-docs.com"][target="_blank"] {
            color: purple;
        }
    </style>
</head>
<body>
    <a href="https://geek-docs.com" target="_blank">Geek Docs</a>
    <a href="https://google.com" target="_blank">Google</a>
</body>
</html>

Output:

CSS属性选择器