CSS常见选择器

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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霜!!

不错,👆赏!!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值