CSS3选择器与属性教程：H5+新功能详解

本笔记详细介绍了HTML5和CSS3的一些关键知识点，涵盖了选择器、属性选择器以及特定样式的应用。以下是主要内容的概述： 1. CSS3新增选择器： - `nth-of-type()`：用于选取同一种类型元素中的第几个，如`h3:nth-of-type(2)`表示第二个`<h3>`元素将设置为红色。 - `nth-child()`：根据父元素下子元素的顺序选择，不区分标签，例如`h3:nth-child(3)`将设置第三个子元素（无论标签）颜色为红色。 2. 兄弟元素选择器： - `+`：相邻兄弟选择器，如`h3+p`只匹配紧跟在`<h3>`后面的第一个`<p>`元素，将其颜色设为红色。 - `~`：通用兄弟选择器，如`h3~p`匹配所有紧跟在`<h3>`后面的`<p>`元素，使其颜色变为红色。 3. 属性选择器： - `[title="这是个标题"]`：选择具有指定`title`属性值的元素，如`title`属性值为"这是个标题"的元素将设置红色文本。 - `[class~="cls"]`：属性值包含指定值，如`class`属性值包含"cls"字符串的元素设为蓝色。 - `[class|="cls"]`：属性值以指定字符串开头的元素，如`class`属性值以"cls"开头的设为蓝色。 - `[class*="cls"]`：属性值包含指定字符串（不论位置），如`class`属性值包含"cls"的元素设为蓝色。 - `[class^='cls']`：属性值以指定字符串开头的，无需分隔符，如`class`属性值以"cls"开头的设为蓝色。 - `[class$='cls']`：属性值以指定字符串结尾的，无需分隔符，如`class`属性值以"cls"结尾的设为蓝色。 4. 样式应用于特定状态： - `:enabled` 和 `:disabled`：选择器用于匹配可启用或禁用的元素（如`input`, `button`, `checkbox`, `radio`），分别设置不同边框样式。 - `:target`：针对已设定`id`的`a`标签的目标元素，为其添加边框样式，如`:target { border: 1px solid #000; }` 5. 元素定位与样式： - `p:last-child`：选择`<p>`元素中的最后一个子元素，设置宽度、高度和边框。 - `p::first-letter`：选择`<p>`元素的第一个字母，设置颜色和字体大小。 - `p::first-line`：选择`<p>`元素的第一行，设置背景颜色。 - `p::selection`：选中文本时，选择区域的样式设置。 此外，还提到了中文与英文文本换行的区别，中文通常在任何地方换行，而英文则会在空格或换行处换行。通过这些选择器和属性，可以灵活地控制网页的样式和交互体验。HTML5和CSS3的这些特性为网页设计提供了更丰富的表现力和灵活性。