CSS3选择器与伪类详解

"这是一份关于前端Web CSS3的笔记，涵盖了选择器、属性选择器、伪类和伪元素等多个重要概念。" 在CSS3中，选择器的使用大大增强了我们对网页元素的控制能力。首先，介绍了一些基本的选择器，例如兄弟选择器和子元素选择器。`X+Y`表示X元素后面紧邻的Y元素，而`X~Y`则表示X元素后面的所有同级Y元素。相邻兄弟选择器（`E+F`）用于选取紧跟在E元素后面的F元素，而通用兄弟选择器（`E~F`）则选取所有在E之后的F元素。 接着，笔记详细阐述了属性选择器的多种用法。例如，`[属性名]`根据属性名选取元素，`[属性名=属性值]`选取属性名与属性值完全匹配的元素，`[属性名~=属性值]`选取属性值包含指定值的元素，`[属性名|="en"]`选取属性值以指定字符串开头的元素，`[属性名^="box"]`选取属性值以“box”开头的元素，`[属性名$="box"]`选取属性值以“box”结尾的元素，以及`[属性名*="box"]`选取属性值中包含“box”的元素。此外，`[data-*="foo"]`用于选取具有自定义属性的元素，`[foo~="bar"]`则适用于处理具有空格分隔属性值的情况。 伪类选择器是CSS3中的另一个强大工具。`:focus`用于选取获得焦点的元素，如输入框；`:checked`选取已勾选的元素，常用于表单的复选框或单选按钮；`:disabled`选取禁用状态的元素，`:enabled`则相反，选取启用状态的元素。`:first-child`、`:last-child`和`:nth-child(n)`分别用于选取父元素的第一个子元素、最后一个子元素以及第n个子元素。`:first-of-type`、`:last-of-type`和`:nth-of-type(n)`则是针对相同类型的元素进行选取。 此外，还有一些特殊的伪类，如`:not(条件)`的否定选择器，用于选取不满足特定条件的元素。伪元素如`::after`和`::before`用于在元素内容前后插入内容，`::first-letter`和`::first-line`分别应用于元素的第一个字母和第一行，而`::selection`则可以改变用户选定文本的样式。 最后，笔记提到了阴影效果的使用，包括文本阴影（`text-shadow`）和盒子阴影（`box-shadow`）。文本阴影通过设置水平、垂直偏移量、模糊半径和阴影颜色来创建文字的阴影效果，而盒子阴影则应用于元素的边框外侧，同样需要设定偏移量、模糊半径和颜色。 这份笔记详细介绍了CSS3中增强选择性和样式的各种方法，对于前端开发者理解和运用CSS3有极大的帮助。