CSS 中的六个重要选择器(三秒就可以记住)

CSS 中的六个重要选择器(三秒就可以记住)

1. ID 选择器 (#)

ID 选择器通过元素的 id 属性来选择元素，并且 id 在整个页面中是唯一的。使用 # 加上 id 名称来定义 ID 选择器。

示例代码：

<div id="my-element">Hello, world!</div>

#my-element {
    color: red;
}

2. 类选择器 (.)

类选择器通过元素的 class 属性来选择元素。使用 . 加上类名来定义类选择器。

示例代码：

<p class="highlight">This is a highlighted paragraph.</p>

.highlight {
    background-color: yellow;
}

3. 元素选择器

元素选择器通过元素名称选择元素。对于使用相同元素名的所有元素，样式将适用于每个元素。

示例代码：

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

p {
    font-size: 16px;
}

4. 后代选择器 (空格)

后代选择器通过选择元素的后代来选择元素。使用空格分隔两个元素，表示第一个元素的后代元素。

示例代码：

<div>
    <h1>Title</h1>
    <p>This is a paragraph.</p>
</div>

div p {
    color: blue;
}

5. 子选择器 (>)

子选择器通过选择元素的子元素来选择元素。使用 > 分隔父元素和子元素。

示例代码：

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

ul > li {
    font-weight: bold;
}

6. 属性选择器 ([])

属性选择器通过匹配具有特定属性的元素来选择元素。使用方括号加上属性名称来定义属性选择器。

示例代码：

<a href="https://www.example.com">Link</a>

a[href="https://www.example.com"] {
    color: green;
}

以上就是 CSS 中的六个重要选择器的完整攻略。通过了解这些选择器，你可以更好地控制和选择你想要样式化的元素。