CSS3选择器与文本样式总结

"这是一个关于CSS3基础知识的总结，涵盖了选择器、字体与文本样式等多个核心概念，旨在方便查阅和学习。" 在CSS3中，选择器是定位和应用样式的基石，它们包括： 1. **标签选择器**：通过元素名称来指定样式，如`p{css样式}`。 2. **类选择器**：使用`.`号前缀，如`.className{css样式}`，用于选取具有特定类名的元素。 3. **ID选择器**：使用`#`号前缀，如`#uniqueId{css样式}`，用于选取具有唯一ID的元素。 4. **通配选择器**：`*{css样式}`，应用于所有元素。 5. **后代选择器**：使用空格分隔，如`div p{css样式}`，选择`div`内的所有`p`元素。 6. **子代选择器**：使用`>`符号，如`div > p{css样式}`，仅选择`div`的直接子元素`p`。 7. **并集选择器**：使用`,`分隔，如`div, p{css样式}`，同时选择`div`和`p`元素。 8. **交集选择器**：直接紧挨着，如`div.className{css样式}`，选择既是`div`又是`.className`的元素。 9. **伪类选择器**：如`:hover`用于鼠标悬停时的样式，`:focus`用于元素获得焦点时的样式。 10. **属性选择器**：如`[type='text']`，选取具有特定属性的元素。 选择器的优先级是决定样式应用的关键，遵循以下顺序： 1. 继承的样式 2. 通配选择器 3. 标签选择器 4. 类选择器 5. ID选择器 6. 行内样式（`style`属性） 7. `!important`规则 复合选择器权重计算方式为：每级权重分别对应0、10、100、1000，例如`#id.class`的权重是1011。 **字体与文本样式**： 1. **字体粗细**：`font-weight`，如`normal`、`bold`或数值100-900。 2. **字体倾斜**：`font-style`，如`normal`或`italic`。 3. **字体家族**：`font-family`，列举多个字体，按顺序备用，如`'Arial', 'Helvetica', sans-serif`。 4. **文本阴影**：`text-shadow`，定义水平、垂直偏移、模糊程度和颜色。 5. **垂直对齐**：`vertical-align`，如`baseline`、`top`、`middle`、`bottom`。 6. **首行缩进**：`text-indent`，如`2em`，用于设置文本首行缩进。 7. **文本对齐**：`text-align`，控制文本在容器中的对齐方式，包括`left`、`center`、`right`。 8. **文本装饰**：`text-decoration`，如去除下划线`text-decoration: none`。 结构伪类选择器如`:first-child`、`:last-child`、`:nth-child(n)`和`:nth-of-type(n)`，用于选择特定位置的子元素。`n`可以是整数、偶数(even)、奇数(odd)或其他数学表达式。 注意，编写CSS时应遵循语法规则，并合理规划选择器以避免冲突，确保样式正确应用。了解并熟练掌握这些基本概念，将有助于你更好地控制页面的布局和视觉表现。