CSS常见选择器

最新推荐文章于 2024-06-06 22:19:23 发布

霜！!

最新推荐文章于 2024-06-06 22:19:23 发布

阅读量919

点赞数 31

文章标签： html 前端框架

本文链接：https://blog.csdn.net/Devil_Forever/article/details/136804552

版权

1.元素选择器：

通过元素的名称来选择元素。例如，选择所有段落元素可以使用 p。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>>类选择器示例/title>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>这 is 个 p</p>
    <div>
        <p>这 is 个 p</p>
    </div>
</body>
</html>

2.类选择器：

通过元素的类名来选择元素。类选择器以点号（.）开头，后面跟着类名。例如，选择所有类为 “example” 的元素可以使用 .example。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器示例</title>
    <style>
        .example {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="example">这里有个 "example"</p>
    <p>这里有个 "example"</p>
</body>
</html>

3.ID选择器：

通过元素的ID属性来选择元素。ID选择器以井号（#）开头，后面跟着ID名称。例如，选择ID为 “header” 的元素可以使用 #header。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID 选择器示例</title>
    <style>
        #header {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>ID 选择器!</h1>
    </div>
    <div>
        <p>ID 选择器</p>
    </div>
</body>
</html>

4.后代选择器：

选择某个元素的后代元素。后代选择器使用空格分隔元素。例如，选择所有段落元素中的强调元素可以使用 p em。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器示例</title>
    <style>
        div p {
            color: green;
        }
    </style>
</head>
<body>
    <div>
        <p>This 后代选择器示例</p>
    </div>
    <p>This 后代选择器示例</p>
</body>
</html>

5.子元素选择器：

选择某个元素的直接子元素。子元素选择器使用大于号（>）分隔父元素和子元素。例如，选择所有列表中的直接子元素可以使用 ul > li。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子元素选择器</title>
    <style>
        ul > li {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
    <div>
        <li>This is 子元素选择器</li>
    </div>
</body>
</html>

6.相邻兄弟选择器：

选择某个元素的紧接在其后的同级兄弟元素。相邻兄弟选择器使用加号（+）符号。例如，选择所有段落元素之后紧跟的标题元素可以使用 p + h2。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相邻兄弟选择器</title>
    <style>
        h2 + p {
            font-style: italic;
        }
    </style>
</head>
<body>
    <h2>鹅鹅鹅</h2>
    <p>曲项向天歌</p>
    <div>
        <h2>鹅鹅鹅</h2>
        <p>白毛浮绿水，红掌拨清波。</p>
    </div>
</body>
</html>

7.通用选择器：

选择所有元素。通用选择器使用星号（）。例如，选择文档中所有元素可以使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通用选择器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div>
        <p>先天下之忧而忧，后天下之乐而乐</p>
    </div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</body>
</html>

8.属性选择器：

选择具有指定属性的元素。属性选择器包括有属性值（例如[attribute]）或者属性值为特定值（例如[attribute=value]）。例如，选择所有带有 href 属性的链接可以使用 a[href]。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style>
        a[target="_blank"] {
            color: blue;
        }
    </style>
</head>
<body>
    <a href="https://example.com" target="_blank">点点点</a>
    <a href="https://example.org">点点点</a>
</body>
</html>

9.伪类选择器：

选择元素的特定状态或位置，如悬停、访问、焦点、第一个子元素等。伪类选择器以冒号（:）开头。例如，选择所有链接的悬停状态可以使用 a:hover。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <a href="#">把鼠标悬停在这里有惊喜！！！</a>
</body>
</html>