前端学习之路12-CSS选择器

选择器

基本选择器

• * :所有元素
• <元素类型>： 类型选择器
• 类名： .class1
• id选择器： #id1
• 属性选择器：[<条件>] ，[href]

复合选择器

• 并集选择器：由逗号分隔的多个选择器 a, span
• 后代选择器：空格分隔 a span
• 选择子元素： 子代选择器跟后代选择器很像，不过只选择匹配元素中的直接后代， > 分隔； body > * > span
• 选择兄弟元素: <> + <>

伪元素选择器

• ::first-line选择器：::first-line选择器匹配文本块的首行
• 使用：:first-letter选择器：选择文本块的首字母
• 使用：before和：after选择器：

结构性伪类选择器

能够根据元素在文档中的位置选择元素。这类选择器都有一个冒号字符前缀（:）

• 根元素选择器：:root选择器匹配文档中的根元素。它可能是用得最少的一个伪类选择器，因为总是返回html元素
• 子元素选择器： ：first-child选择器，使用：last-child选择器，使用：only-child选择器，使用：only-of-type选择器（:only-of-type选择器匹配父元素定义类型的唯一子元素），使用：nth-child选择器

UI伪类选择器

动态伪类选择器

• 使用：link和：visited选择器
• 使用：hover选择器
• 使用：active选择器
• 使用：focus选择器