白骑士的CSS教学语法基础篇之选择器 2.1.1 基本选择器

        选择器是 CSS 的核心，用于选择 HTML 元素并应用样式。理解不同类型的选择器及其用法，对于编写有效和可维护的 CSS 非常重要。以下是常见的基本选择器，包括元素选择器、类选择器和 ID 选择器。

基本选择器

元素选择器

        元素选择器用于选择 HTML 元素并对其应用样式。它基于元素的标签名称进行匹配。这是最简单且最常用的选择器类型。

        语法：

element {
    property: value;
}

        示例：

/* 选择所有 <p> 元素并设置文本颜色为蓝色 */
p {
    color: blue;
}

/* 选择所有 <h1> 元素并设置字体大小为24px */
h1 {
    font-size: 24px;
}

        解释：

• ‘p‘ 选择器应用于所有 ‘<p>‘ 元素，将其文本颜色设置为蓝色。
• ‘h1‘ 选择器应用于所有 ‘<h1>‘ 元素，将其字体大小设置为 24px。

类选择器

        类选择器用于选择具有特定类属性的 HTML 元素。类选择器可以用于多个元素，并且可以在一个页面中复用。类选择器的名称以句点（‘.‘）开头。

        语法：

.classname {
    property: value;
}

        示例：

/* 选择所有具有 class="highlight" 的元素并设置背景色为黄色 */
.highlight {
    background-color: yellow;
}

/* 选择所有具有 class="btn" 的元素并设置字体颜色为白色 */
.btn {
    color: white;
    background-color: blue;
    padding: 10px;
    border: none;
}

        解释：

• ‘.highlight‘ 选择器应用于所有具有 ‘class="highlight"‘ 的元素，将背景色设置为黄色。
• ‘.btn‘ 选择器应用于所有具有 ‘class="btn"‘ 的元素，将字体颜色设置为白色，并且添加了蓝色背景、内边距和无边框样式。

ID选择器

        ID选择器用于选择具有特定 ID 属性的 HTML 元素。ID 选择器的名称以井号（‘#‘）开头。每个页面中只能有一个唯一的 ID，因此 ID 选择器应仅用于唯一的元素。

        语法：

#idname {
    property: value;
}

        示例：

/* 选择具有 id="header" 的元素并设置背景色为灰色 */
#header {
  background-color: gray;
  color: white;
  padding: 20px;
}

/* 选择具有 id="main-content" 的元素并设置边距为20px */
#main-content {
  margin: 20px;
}

        解释：

• ‘#header‘ 选择器应用于具有 ‘id="header"‘ 的元素，将背景色设置为灰色，并设置白色字体颜色和内边距。
• ‘#main-content‘ 选择器应用于具有 ‘id="main-content"‘ 的元素，将其边距设置为 20px。

选择器的优先级

        选择器的优先级决定了当多个选择器应用于同一元素时，哪个样式最终生效。CSS 使用以下优先级规则来确定样式的应用：

1. ‘内联样式‘：直接在 HTML 元素的 ‘style‘ 属性中定义的样式具有最高优先级。例如：‘<p style="color: red;">‘
2. ‘ID 选择器‘：ID 选择器的优先级较高，例如：‘#header‘
3. ‘类选择器、属性选择器和伪类‘：这些选择器的优先级较低，例如：‘.btn‘、‘[type="text"]‘、‘:hover‘
4. ‘元素选择器和伪元素‘：这些选择器的优先级最低，例如：‘p‘、‘::before‘

        CSS示例：

/* ID选择器 */
#header {
  color: red;
}

/* 类选择器 */
.highlight {
  color: blue;
}

/* 元素选择器 */
p {
  color: green;
}

        HTML示例：

<p id="header" class="highlight">Hello World</p>

        在这个例子中，‘#header‘ 的样式将会生效，因为 ID 选择器具有最高优先级，即使 ‘.highlight‘ 和 ‘p‘ 选择器也试图改变文本颜色。

总结

        基本选择器是 CSS 的基础，涵盖了元素选择器、类选择器和 ID 选择器。理解这些选择器及其优先级规则，有助于开发者在样式应用中实现精确控制，并避免样式冲突。选择器的正确使用不仅提高了 CSS 的可维护性，还能有效提升网页的表现力和用户体验。