CSS选择器选择包含指定内容|极客教程

CSS选择器选择包含指定内容

在CSS中，选择器是用来选择HTML元素的一种方式，通过选择器可以对页面中的元素进行样式设置。在实际开发中，有时候我们需要选择包含指定内容的元素，这时就需要使用一些特定的选择器来实现。本文将详细介绍如何使用CSS选择器选择包含指定内容的元素，并提供相关示例代码。

1. 通用选择器

通用选择器*可以选择页面中的所有元素，但是无法选择包含指定内容的元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通用选择器示例</title>
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <div>geek-docs.com</div>
    <p>这是一个段落</p>
</body>
</html>

Output:

CSS选择器选择包含指定内容

在上面的示例中，通用选择器*选择了页面中的所有元素，并将它们的文字颜色设置为红色。但是无法选择包含指定内容的元素。

2. 类选择器

类选择器.classname可以选择具有指定类名的元素，但是无法选择包含指定内容的元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器示例</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="highlight">这是一个高亮的div</div>
    <p>geek-docs.com</p>
</body>
</html>

Output:

CSS选择器选择包含指定内容

在上面的示例中，类选择器.highlight选择了具有highlight类名的元素，并将它们的背景颜色设置为黄色。但是无法选择包含指定内容的元素。

3. ID选择器

ID选择器#idname可以选择具有指定ID的元素，但是无法选择包含指定内容的元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID选择器示例</title>
    <style>
        #content {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="content">geek-docs.com</div>
    <p>这是一个段落</p>
</body>
</html>

Output:

CSS选择器选择包含指定内容

在上面的示例中，ID选择器#content选择了具有content ID的元素，并将它们的字体加粗。但是无法选择包含指定内容的元素。

4. 属性选择器

属性选择器[attribute=value]可以选择具有指定属性值的元素，但是无法选择包含指定内容的元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器示例</title>
    <style>
        [data-text="geek-docs.com"] {
            color: blue;
        }
    </style>
</head>
<body>
    <div data-text="geek-docs.com">这是一个包含指定内容的div</div>
    <p>这是一个段落</p>
</body>
</html>

Output:

CSS选择器选择包含指定内容

在上面的示例中，属性选择器[data-text="geek-docs.com"]选择了具有data-text="geek-docs.com"属性值的元素，并将它们的文字颜色设置为蓝色。但是无法选择包含指定内容的元素。

5. 子串值选择器

子串值选择器[attribute*=value]可以选择属性值中包含指定子串的元素，通过这个选择器可以实现选择包含指定内容的元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子串值选择器示例</title>
    <style>
        [data-text*="geek-docs.com"] {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div data-text="geek-docs.com">这是一个包含指定内容的div</div>
    <p>geek-docs.com</p>
</body>
</html>

Output:

CSS选择器选择包含指定内容

在上面的示例中，子串值选择器[data-text*="geek-docs.com"]选择了具有data-text属性值中包含geek-docs.com子串的元素，并将它们的背景颜色设置为粉色。这样就实现了选择包含指定内容的元素。

6. 结束子串值选择器

结束子串值选择器[attribute$=value]可以选择属性值以指定子串结尾的元素，通过这个选择器也可以实现选择包含指定内容的元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结束子串值选择器示例</title>
    <style>
        [data-text$="geek-docs.com"] {
            font-style: italic;
        }
    </style>
</head>
<body>
    <div data-text="geek-docs.com">这是一个包含指定内容的div</div>
    <p>这是一个段落 geek-docs.com</p>
</body>
</html>

Output:

CSS选择器选择包含指定内容

在上面的示例中，结束子串值选择器[data-text$="geek-docs.com"]选择了具有data-text属性值以geek-docs.com结尾的元素，并将它们的字体样式设置为斜体。这样就实现了选择包含指定内容的元素。

7. 开始子串值选择器

开始子串值选择器[attribute^=value]可以选择属性值以指定子串开头的元素，通过这个选择器也可以实现选择包含指定内容的元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开始子串值选择器示例</title>
    <style>
        [data-text^="geek-docs.com"] {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div data-text="geek-docs.com">这是一个包含指定内容的div</div>
    <p>geek-docs.com 是一个网站</p>
</body>
</html>

Output:

CSS选择器选择包含指定内容

在上面的示例中，开始子串值选择器[data-text^="geek-docs.com"]选择了具有data-text属性值以geek-docs.com开头的元素，并将它们的文本下划线样式设置为下划线。这样就实现了选择包含指定内容的元素。

8. 伪类选择器

伪类选择器可以选择元素的特定状态或位置，通过一些特定的伪类选择器也可以实现选择包含指定内容的元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器示例</title>
    <style>
        p:contains("geek-docs.com") {
            color: green;
        }
    </style>
</head>
<body>
    <div>这是一个div</div>
    <p>geek-docs.com 是一个网站</p>
</body>
</html>

Output:

CSS选择器选择包含指定内容