CSS 四类基本选择器

一、元素选择器（Type Selector）

元素选择器是最常见的CSS选择器，用于选中指定类型的HTML元素并为其应用样式。

1. 元素选择器

元素选择器通过元素名称选择所有该类型的HTML元素。

p {
    color: blue; /* 将所有<p>标签的文本颜色设置为蓝色 */
}

解释：

• 选择所有<p>标签，应用蓝色字体颜色。

2. 多元素选择器

你可以同时选择多个元素，并为它们应用相同的样式。

h1, h2, h3 {
    font-family: Arial, sans-serif; /* 所有<h1>, <h2>, <h3>标签的字体设置为Arial */
}

解释：

• 通过逗号分隔，选择多个元素标签，并为它们应用相同的样式。

二、类选择器（Class Selector）

类选择器用于选中HTML元素的class属性，并应用样式。类选择器以点号（.）开头。

1. 类选择器

类选择器通过元素的class属性来选中一个或多个元素。

.button {
    background-color: #4CAF50; /* 所有class为"button"的元素背景色设置为绿色 */
    color: white;
}

解释：

• 选择所有class="button"的元素，设置背景色为绿色，字体颜色为白色。

2. 多类选择器

一个元素可以有多个类名，CSS可以通过多个类选择器同时应用样式。

.button.primary {
    background-color: #008CBA; /* 选择具有"button"和"primary"两个类的元素 */
}

解释：

• 选择同时具有button和primary类名的元素，设置背景色为蓝色。

三、ID选择器（ID Selector）

ID选择器用于选中具有指定id属性的单个HTML元素。ID选择器以井号（#）开头。

1. ID选择器

ID选择器通过元素的id属性来选中一个元素。

#header {
    font-size: 24px; /* 选择id为"header"的元素，并设置字体大小 */
}

解释：

• 选择id="header"的元素，并设置字体大小为24px。

2. ID选择器应用的注意事项

• id属性是唯一的，每个id只能在页面中出现一次。
• 使用#id可以快速且准确地选择一个唯一的元素。

四、通用选择器（Universal Selector）

通用选择器用于选择页面中的所有元素。它使用星号（*）作为选择符。

1. 通用选择器

通用选择器选中页面中的所有元素，并为它们应用样式。

* {
    margin: 0; /* 为页面中的所有元素设置0的外边距 */
    padding: 0; /* 为页面中的所有元素设置0的内边距 */
}

解释：

• 使用*选择器，清除页面中所有元素的外边距和内边距。

2. 通用选择器应用

通用选择器非常有用，特别是在重置样式时，常常用于全局设置页面的边距、字体、框架等。

总结

CSS基本选择器的四类：

1. 元素选择器：选择指定类型的HTML元素。例如，p选择所有段落。
2. 类选择器：选择具有指定类名的HTML元素。例如，.button选择所有具有button类的元素。
3. ID选择器：选择具有指定id的单个HTML元素。例如，#header选择id="header"的元素。
4. 通用选择器：选择页面中所有的HTML元素。例如，*选择所有元素。

示例：多种选择器的组合

/* 元素选择器 */
h1 {
    color: red; /* 所有<h1>元素文字颜色为红色 */
}

/* 类选择器 */
.button {
    background-color: green; /* 所有类名为"button"的元素背景色为绿色 */
}

/* ID选择器 */
#header {
    font-size: 30px; /* ID为"header"的元素字体大小为30px */
}

/* 通用选择器 */
* {
    margin: 0;
    padding: 0; /* 清除所有元素的内外边距 */
}

通过理解和应用这些基本选择器，你可以灵活地为页面中的元素定义样式，提高网页的表现力和用户体验。