选择器决定了：你要给谁设置样式。

一、标签选择器

直接写标签名，选中所有该标签：

p {
  color: #333;
}

特点：范围大，容易“全局影响”

示例说明：

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为7-1.CSS引用方式-标签选择器.html

<!DOCTYPE html>
<html>
<head>
    <title>标签选择器演示</title>
    <style>
        /* 选择所有<p>标签 */
        p {
            color: #e74c3c;
            font-size: 18px;
            border: 2px solid #3498db;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h2>标签选择器效果</h2>
    <p>这个段落应用了标签选择器样式</p>
    <div>这个div没有样式</div>
    <p>另一个被选中的段落</p>
</body>
</html>

2、双击【7-1.CSS引用方式-标签选择器.html】

image-20250519204803817

二、类选择器

HTML：

<div class="box"></div>

CSS：

.box {
  width: 200px;
}

特点：可重复使用（多个元素都能用同一个 class）

示例说明：

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为7-2.CSS引用方式-类选择器.html

<!DOCTYPE html>
<html>
<head>
    <title>类选择器演示</title>
    <style>
        /* 选择所有.highlight类 */
        .highlight {
            background-color: #f1c40f;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <h2>类选择器效果</h2>
    <div class="highlight">应用.highlight类的元素</div>
    <p>普通段落</p>
    <button class="highlight">带样式的按钮</button>
</body>
</html>

2、双击【7-2.CSS引用方式-类选择器.html】

image-20250519204920899

三、id选择器

HTML：

<div id="header"></div>

CSS：

#header {
  height: 60px;
}

特点：

  • id 应该在页面中唯一
  • 权重较高，不建议滥用（后期维护麻烦）

示例说明：

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为7-3.CSS引用方式-id选择器.html

<!DOCTYPE html>
<html>
<head>
    <title>ID选择器演示</title>
    <style>
        /* 选择#main-title元素 */
        #main-title {
            color: #2ecc71;
            font-size: 24px;
            text-decoration: underline;
            padding: 10px;
            border: 3px double #2ecc71;
        }
    </style>
</head>
<body>
    <h2 id="main-title">唯一标题样式</h2>
    <h2>普通标题</h2>
    <p>ID选择器具有唯一性</p>
</body>
</html>

2、双击【7-3.CSS引用方式-id选择器.html】

image-20250519205100089

四、后代选择器（空格）

选中某元素内部的所有“后代”（儿子、孙子都算）：

.nav a {
  color: red;
}

表示：.nav 里面所有 a 标签都变红。

示例说明：

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为7-4.CSS引用方式-后代选择器.html

<!DOCTYPE html>
<html>
<head>
    <title>后代选择器演示</title>
    <style>
        /* 选择article内的所有p元素 */
        article p {
            background-color: #ecf0f1;
            padding: 10px;
            border-left: 4px solid #9b59b6;
        }
    </style>
</head>
<body>
    <h2>后代选择器效果</h2>
    <article>
        <p>文章内的段落（被选中）</p>
        <div><p>嵌套段落（也被选中）</p></div>
    </article>
    <p>普通段落（未被选中）</p>
</body>
</html>

2、双击【7-4.CSS引用方式-后代选择器.html】

image-20250519205124862

五、儿子选择器（>）

只选中“亲儿子”，不选孙子：

.nav > a {
  color: blue;
}

示例说明：

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为7-5.CSS引用方式-儿子选择器.html

<!DOCTYPE html>
<html>
<head>
    <title>儿子选择器演示</title>
    <style>
        /* 只选择直接子元素 */
        ul > li {
            color: #e67e22;
            font-weight: bold;
            margin: 5px;
            padding: 5px;
            border: 1px solid currentColor;
        }
    </style>
</head>
<body>
    <h2>儿子选择器效果</h2>
    <ul>
        <li>直接子元素（被选中）</li>
        <li>另一个直接子元素
            <ul>
                <li>嵌套子元素（未被选中）</li>
            </ul>
        </li>
    </ul>
</body>
</html>

2、双击【7-5.CSS引用方式-儿子选择器.html】

image-20250519205148142

六、属性选择器

根据标签属性来选中元素。

6.1 选中具有某属性的元素

input[type] {
  border: 1px solid #ccc;
}

6.2 选中属性等于某值

input[type="password"] {
  background-color: #f9f9f9;
}

6.3 常见场景：a 标签 target

a[target="_blank"] {
  color: orange;
}

6.4 示例说明

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为7-6.CSS引用方式-属性选择器.html

<!DOCTYPE html>
<html>
<head>
    <title>属性选择器演示</title>
    <style>
        /* 选择type="password"的输入框 */
        input[type="password"] {
            border: 2px solid #e74c3c;
            padding: 8px;
            background: #fce4ec;
        }
    </style>
</head>
<body>
    <h2>属性选择器效果</h2>
    <input type="text" placeholder="普通输入框">
    <input type="password" placeholder="密码输入框（特殊样式）">
</body>
</html>

2、双击【7-6.CSS引用方式-属性选择器.html】

image-20250519205215531