0基础学前端 day2 番外

最新推荐文章于 2024-09-25 09:53:04 发布

无限大.

最新推荐文章于 2024-09-25 09:53:04 发布

阅读量349

点赞数 6

分类专栏： 0基础学前端文章标签：前端

本文链接：https://blog.csdn.net/wxdzuishaui/article/details/142497935

版权

0基础学前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

大家好，欢迎来到无限大的频道。

类选择器和ID选择器都是CSS中用于选择元素并应用样式的工具，但它们有一些关键的区别：

1. 语法

- 类选择器：以点号（`.`）开头，后面跟类名。一个类选择器可以选择多个元素。
- 例如：`.my-class`，用于选择 class 属性为 `my-class` 的所有元素。

- ID选择器：以井号（`#`）开头，后面跟ID名。一个ID选择器只能选择一个特定元素，因为在一个HTML文档中，ID属性应该是唯一的。
- 例如：`#my-id`，用于选择 id 属性为 `my-id` 的元素。

2. 使用场景

- 类选择器：适用于当你需要对多个元素应用相同的样式时。例如，多个不同的段落、按钮或其他元素可能会共享一个类。

  <p class="highlight">这是一个高亮段落。</p>
  <p class="highlight">这是另一个高亮段落。</p>

- ID选择器：用于需要唯一标识的元素，例如一个网页的导航、页脚或特定的内容区域。由于不能在同一文档中重复使用ID，因此通常用来选择特定的元素。

  <div id="header">网站标题</div>
  <div id="footer">网站底部信息</div>

3. 优先级

- 类选择器：在CSS中的权重相对较低。
- ID选择器：在CSS中的权重相对较高。在同样的情况下，如果有冲突，ID选择器的样式将覆盖类选择器的样式。

4. 定义与引用

- 类选择器可以在HTML元素的 `class` 属性中使用，可以在多个元素上使用同一个类。

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

- ID选择器只能在HTML文档中一个元素的 `id` 属性中使用，必须保证唯一性。

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

5. 示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器与ID选择器示例</title>
    <style>
        .highlight {
            color: red; /* 类选择器 */
        }
        #unique {
            color: blue; /* ID选择器 */
        }
    </style>
</head>
<body>
    <p class="highlight">这个段落将会是红色的。</p>
    <p class="highlight">这个段落也将是红色的。</p>
    <p id="unique">这个段落将会是蓝色的。</p>
</body>
</html>