CSS3 选择器精讲

CSS3 选择器作为样式表的基础，扮演着至关重要的角色。它就像一把精准的钥匙，能够解锁并控制页面中各种元素的样式。

基础选择器：

• 标签选择器: 通过元素名称选择，例如 h1 选择所有

  元素。

• 类选择器: 通过类名选择，例如 .intro 选择所有 class 为 intro 的元素。
• ID 选择器: 通过 ID 选择，例如 #header 选择 ID 为 header 的元素。
• 通配符选择器: 使用 * 选择所有元素。

属性选择器：

• [attr] 选择器: 选择具有指定属性的元素。
• [attr=val] 选择器: 选择属性值为 val 的元素。
• [attr~=val] 选择器: 选择属性值包含单词 val 的元素。
• [attr|=val] 选择器: 选择属性值以 val 开头或以 val- 开头的元素。

伪类选择器：

• :link 选择未访问的链接。
• :visited 选择已访问的链接。
• :hover 选择鼠标悬停的元素。
• :active 选择活动的链接。
• :focus 选择获得焦点的元素。

伪元素选择器：

• ::before 在元素内容之前插入内容。
• ::after 在元素内容之后插入内容。

结构伪类选择器：

• :first-child 选择父元素的第一个子元素。
• :last-child 选择父元素的最后一个子元素。
• :nth-child(n) 选择父元素的第 n 个子元素。

掌握 CSS3 选择器将使您能够更加灵活地控制页面样式，实现更丰富的页面效果。