html5——CSS高级选择器

在HTML5中，CSS提供了多种高级选择器，以下是一些常用的高级选择器及其使用示例：

1. 属性选择器：可以根据元素的属性或属性值来选择元素。

/* 选择所有具有title属性的元素 */
[title] { color: blue; }
 
/* 选择title属性值为hello的所有元素 */
[title=hello] { font-weight: bold; }
 
/* 选择title属性值以hello开头的所有元素 */
[title^=hello] { text-decoration: underline; }
 
/* 选择title属性值以hello结尾的所有元素 */
[title$=hello] { text-transform: uppercase; }
 
/* 选择title属性值包含（正则表达式）hello的所有元素 */
[title*=hello] { font-style: italic; }

2. 伪类选择器：用于选择元素的特定状态。

/* 选择所有被激活的链接 */
a:active { color: yellow; }
 
/* 选择所有悬停的链接 */
a:hover { text-decoration: none; }
 
/* 选择所有获得焦点的输入框 */
input:focus { border: 2px solid red; }

3. 伪元素选择器：用于选择元素的特定部分（如第一个字母、第一行等）。

/* 选择每个段落的第一个字母 */
p::first-letter { font-size: 200%; }
 
/* 选择每个段落的第一行 */
p::first-line { color: green; }
 
/* 选择每个段落的前两个字符 */
p::before { content: "✨"; }

4. 结构性伪类选择器：用于选择某种DOM元素（如父元素、子元素等）。

/* 选择每个无序列表的第一个<li>元素 */
ul li:first-child { color: purple; }
 
/* 选择每个无序列表中的最后一个<li>元素 */
ul li:last-child { text-transform: uppercase; }
 
/* 选择每个无序列表中的第一个<li>元素的直接子元素 */
ul li:first-of-type { font-weight: bold; }
 
/* 选择每个无序列表中的最后一个<li>元素的直接子元素 */
ul li:last-of-type { font-style: italic; }
 
/* 选择每个有note类的元素的第一个子元素 */
.note > :first-child { border-bottom: 1px solid black; }

5. 伪元素选择器（与伪类选择器区分开来）：用于创建一些不在文档树中的元素，但可以用CSS样式格式化。

/* 选择每个段落的第一个字母 */
p::first-letter { font-size: 200%; }
 
/* 选择每个段落的第一行 */
p::first-line { color: green; }
 
/* 选择每个段落的前两个字符 */
p::before { content: "✨"; }

以上代码展示了如何使用不同的CSS高级选择器来选择和格式化HTML元素。在实际应用中，可以根据需要选择合适的选择器并结合其他CSS规则来创建复杂的样式表。