CSS选择器与伪类详解

"这是一份关于CSS的笔记文档，包含了对CSS选择器的详细解释和一些常用的伪类和伪元素的应用。" 在CSS中，选择器是用于定位网页中特定元素的关键工具，使得我们可以精确地控制样式。以下是笔记中提到的一些重要选择器类型： 1. **兄弟选择器**： - `E+F`：相邻兄弟选择器，选择紧邻E元素后面的F元素。 - `E~F`：通用兄弟选择器，选择所有在E元素之后的F元素。 2. **属性选择器**： - `[属性名]`：根据属性名选择元素。 - `[属性名=属性值]`：完全匹配属性名和属性值。 - `[属性名~=属性值]`：属性值中包含指定的单词。 - `[属性名|="en"]`：属性值以指定字符串开始。 - `[属性名^="box"]`：属性值以指定字符串开始。 - `[属性名$="box"]`：属性值以指定字符串结束。 - `[属性名*="box"]`：属性值中包含指定字符串。 3. **自定义属性选择器**：`X[data-*="foo"]` 用于选择具有特定自定义属性的元素，例如`data-*`。 4. **动态伪类选择器**： - `:focus`：用于选取获得焦点的元素，常用于`input`等交互元素。 - `:checked`：选取被选中的元素，如`radio`或`checkbox`。 - `:disabled`：选取处于禁用状态的元素。 - `:enabled`：选取处于启用状态的元素。 5. **伪类选择器**： - `:first-child`：选取父元素的第一个子元素。 - `:last-child`：选取父元素的最后一个子元素。 - `:nth-child(n)`：选取父元素的第n个子元素，支持使用数学表达式。 - `:first-of-type`：选取父元素中同类型的第一个元素。 - `:last-of-type`：选取父元素中同类型的最后一个元素。 - `:nth-of-type(n)`：选取父元素中同类型的第n个元素。 6. **否定选择器**：`:not(条件)` 用于选取不满足指定条件的元素。 7. **伪元素**： - `::after` 和 `::before`：在元素内容前后插入内容，需要使用`content`属性。 - `::first-letter`：选取元素内的第一个字母。 - `::first-line`：选取元素内的第一行。 - `::selection`：控制网页中被选文本的样式。 此外，笔记还提到了阴影效果的使用： - **文本阴影**：`text-shadow` 属性设置文本的阴影效果，包括水平和垂直偏移量、模糊半径和阴影颜色。 - **盒子阴影**：`box-shadow` 属性用于设置元素的盒阴影，包含水平和垂直偏移量、模糊半径以及可选的扩展半径和颜色。 这些CSS知识点涵盖了选择器的广泛使用，是理解和编写高效CSS样式的基础。通过熟练掌握这些概念，可以更精准地控制页面布局和交互效果。