CSS3选择器使用手册：属性选择器、结构性伪类选择器、伪元素选择器详解

CSS3经典使用手册 CSS3经典使用手册是一个详细的CSS3使用指南，涵盖了选择器、文字样式等特定属性的详细说明。本手册旨在帮助读者更好地理解和使用CSS3。 一、属性选择器 在CSS3中，引入了三种新的属性选择器： 1. [att*=val]：表示包含用val指定的字符 2. [att^=val]：表示开头字符用val指定的字符 3. [att$=val]：表示结尾字符用val指定的字符 例如：[id$=\-1]{background-color:yellow;}结尾字符为-1 二、结构性伪类选择器 结构性伪类选择器用于选择某个元素的某个状态，例如： 1. a:link、a:visited、a:hover、a:active 2. 格式：选择器：伪元素{属性：值} 选择器类名：伪元素{属性：值} 三、伪元素选择器 伪元素选择器用于选择某个元素的某个部分，例如： 1. first-line：用于为某个元素中的第一行文字使用样式。 2. first-letter：用于某个元素中的文字的首字母或第一个字使用样式。 3. before：用于在某个元素之前插入一些内容。 4. after：用于在某个元素之后插入一些内容。 四、选择器：root,not,empty,target 这四个选择器用于选择某个元素的特殊状态，例如： 1. root：将样式绑定到页面的根元素（是指位于文档树中最顶层结构的元素） 2. not：想对某个结构元素使用样式，但想排除该结构元素的子结构元素。 3. empty：指定当元素内容为空白时使用的样式。 4. target：对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接来使用。 五、选择器：first-child、last-child、nth-child、nth-last-child 这四个选择器用于选择某个元素的子元素，例如： 1. first-child和last-child：单独指定第一个子元素与最后一个子元素样式。 2. nth-child和nth-last-child： （1）对指定序号的子元素使用样式。 格式：nth-child(n){} <子元素>：nth-last-child(n){} （2）对所有第奇数个子元素或第偶数个子元素使用样式 正数第偶个：nth-child(odd){} <子元素>：nth-last-child(n){} 正数第奇个：nth-child(even){} <子元素>：nth-last-child(n){} 倒数第偶个：nth-last-child(odd){} <子元素>：nth-last-child(n){} 倒数第奇个：nth-last-child(odd){} <子元素>：nth-last-child(n){} 六、选择器：nth-of-type和nth-last-of-type 这两个选择器用于选择同类型的子元素，例如： 1. nth-of-type：选择同类型的子元素 2. nth-last-of-type：选择同类型的子元素，从最后一个开始 本手册涵盖了CSS3中常用的选择器和伪类选择器，旨在帮助读者更好地理解和使用CSS3，提高Web开发效率。