CSS中的class与id

• 定义

  • class（类）

    • 在 CSS 中，class是一种用于为 HTML 元素分组的属性。多个 HTML 元素可以共享同一个class名称。例如：

      • 在 HTML 中，可以有多个<div>元素使用同一个class，像<div class = "box">，<p class = "box">等。这里的box就是一个class名称。

    • 在 CSS 中，使用点（.）符号来选择具有特定class的元素。例如，如果有一个class名为box，在 CSS 中可以这样定义样式：.box{background - color:red;}。这个样式会应用到所有class为box的元素上。

  • id（标识符）

    • id是 HTML 元素的唯一标识符。在一个 HTML 文档中，id的值必须是唯一的。例如：<div id = "header">。

    • 在 CSS 中，使用井号（#）符号来选择具有特定id的元素。例如，对于id为header的元素，在 CSS 中可以这样定义样式：#header{font - size:20px;}。这个样式只会应用到id为header的那个特定元素上。

• 使用场景

  • class

    • 当需要对多个元素应用相同的样式时，使用class是非常合适的。例如，一个网页中有多个按钮，它们都有相似的外观，如相同的背景颜色、边框样式和文本颜色等，就可以给这些按钮设置一个共同的class，然后在 CSS 中定义这个class的样式。

    • 可以通过 JavaScript 操作具有相同class的元素。例如，获取所有class为active的元素并添加事件监听器。

  • id

    • 当需要针对某个特定的、独一无二的元素进行样式设置或操作时，使用id。例如，网页的导航栏中的标志部分，它在整个页面中是唯一的，适合用id来标识并设置样式。

    • 在 JavaScript 中，经常使用id来快速获取特定的元素进行操作，比如通过document.getElementById('myElementId')获取具有特定id的元素并修改其内容或属性。

• 优先级

  • 在 CSS 中，id选择器具有比class选择器更高的优先级。如果一个元素同时具有id和class，并且两者都定义了相同的样式属性，那么id选择器定义的样式将优先应用。例如：

    • HTML：<div id = "myDiv" class = "myClass">Content</div>

    • CSS：

      • .myClass{color:blue;}

      • #myDiv{color:red;}

    • 在这种情况下，这个<div>元素中的文字颜色将是红色，因为id选择器的优先级更高。