CSS常见选择器详解以及应用场景案例

CSS选择器是一种强大的工具，用于选择HTML元素并应用样式规则。以下是CSS中常用的一些选择器的详解及其应用示例：

1. 类选择器（Class Selector）：

   • 详解：类选择器使用HTML元素的class属性来选择元素。一个元素可以有多个类，类名之间用空格分隔。
   • 应用：类选择器常用于为具有相同或相似样式的一组元素设置样式。
   • 示例：.my-class { color: red; } 将会选择所有类名为my-class的元素，并将其文本颜色设置为红色。

2. ID选择器（ID Selector）：

   • 详解：ID选择器使用HTML元素的id属性来选择元素。每个HTML文档中的ID都应该是唯一的。
   • 应用：ID选择器常用于为页面上的唯一元素（如导航栏、页脚等）设置样式。
   • 示例：#my-id { font-size: 20px; } 将会选择ID为my-id的元素，并将其字体大小设置为20像素。

3. 元素选择器（Element Selector）：

   • 详解：元素选择器直接通过HTML元素的标签名来选择元素。
   • 应用：元素选择器常用于为某种特定类型的元素设置样式。
   • 示例：p { margin-bottom: 10px; } 将会选择所有的<p>元素，并在其下方添加10像素的外边距。

4. 属性选择器（Attribute Selector）：

   • 详解：属性选择器通过引用元素的属性和属性值来选择元素。
   • 应用：属性选择器常用于选择具有特定属性或属性值的元素。
   • 示例：