CSS3 选择器有哪些新特性

CSS3 引入了许多新的选择器，使得开发者能够更加精确地选择页面上的元素，从而实现更复杂的布局和样式设计。以下是一些主要的 CSS3 选择器新特性：

属性选择器

• e[att]：选择具有 att 属性的 e 元素。
• e[att=‘val’]：选择具有 att 属性且属性值等于 val 的 e 元素。
• e[att^=‘val’]：匹配具有 att 属性且值以 val 开头的 e 元素。
• e[att$=‘val’]：匹配具有 att 属性且值以 val 结尾的 e 元素。
• e[att=‘val’]*：匹配具有 att 属性且值中含有 val 的 e 元素。

结构伪类选择器

• e:first-child：匹配父元素中的第一个子元素。
• e:last-child：匹配父元素中的最后一个子元素。
• e:nth-child(n)：匹配父元素中的第 n 个子元素。
• e:first-of-type：选择同类型中的第一个元素。
• e:last-of-type：选择同类型中的最后一个元素。
• e:nth-of-type(n)：选择同类型中的第 n 个元素。

伪元素选择器

• e::first-line：选择元素的第一行文字。
• e::first-letter：选择元素的第一个字母。
• e::selection：选择文本选中之后的背景色及文字颜色。
• e::not(s)：排除掉某个元素。

其他新特性

• Flexbox：提供了一种更高效的布局方式，适用于一维布局（行或列）。
• Grid：提供了强大的二维布局系统，可以轻松创建复杂的布局。

这些新特性极大地增强了 CSS 的功能，使得开发者能够更灵活地控制网页的布局和样式。