CSS 选择器

CSS+CSS3 选择器

基础选择器

• 元素选择器：p{ }
• 类选择器: .box { }
• ID 选择器: #header { }
• 通配符选择器: * { }

组合选择器

• 后代选择器: div p { }
• 子元素选择器: ul > li { }
• 相邻兄弟选择器: h1 + p { }
• 一般兄弟选择器: h1 ~ p { }

属性选择器

• 存在属性选择器: a[target] { }
• 属性值等于选择器: input[type="text"] { }
• 属性值包含选择器: a[href*="google"] { }
• 属性值以某个子串开头选择器: a[href^="https"] { }
• 属性值以某个子串结尾选择器: img[src$=".png"] { }

伪类

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。伪类使用 : 进行标识。

• :hover 鼠标悬停时触发
• :active 鼠标点击时触发
• :focus 元素获得焦点时触发
• :first-child 选择父元素的第一个子元素
• :last-child 选择父元素的最后一个子元素
• :nth-child(n) 选择父元素的第 n 个子元素
• :nth-last-child(n) 选择父元素的倒数第 n 个子元素
• :nth-of-type(n) 选择父元素的第 n 个指定类型的子元素
• :nth-last-of-type(n) 选择父元素的倒数第 n 个指定类型的子元素
• :only-child 选择父元素的唯一一个子元素
• :only-of-type 选择父元素的唯一一个指定类型的子元素
• :empty 选择没有子元素的元素
• :not(selector) 选择不符合指定选择器的元素
• :checked 选择被选中的表单元素
• :disabled 选择被禁用的表单元素
• :enabled 选择被启用的表单元素
• :required 选择必填的表单元素
• :optional 选择可选的表单元素
• :valid 选择符合验证规则的表单元素
• :invalid 选择不符合验证规则的表单元素
• :in-range 选择在指定范围内的表单元素
• :out-of-range 选择在指定范围外的表单元素
• :read-only 选择只读的表单元素
• :read-write 选择可读写的表单元素
• :target 选择当前活动的目标元素
• :root 选择文档的根元素
• :lang(language) 选择指定语言的元素

伪类的执行顺序

:link、:visited、:hover、:active 的执行顺序

• L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，方便记忆可以用喜欢和讨厌两个词来概括

伪元素

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号 ::

• ::before 在元素内容前插入内容
• ::after 在元素内容后插入内容
• ::first-letter 选择元素的第一个字母
• ::first-line 选择元素的第一行
• ::selection 选择被用户选中的内容
• ::placeholder 选择表单元素的占位符文本
• ::marker 选择列表项的标记
• ::backdrop 选择全屏模式的背景

CSS 选择器权重

• 遇到!important 则是最大，大于一切。
• 内联样式（1000）
• ID 选择器（0100）
• 类选择器/属性选择器/伪类选择器（0010）
• 元素选择器/伪元素选择器（0001）
• 关系选择器/通配符选择器（0000）

带!important 标记的样式属性优先级最高； 样式表的来源相同时：!important > 行内样式>ID 选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性