CSS3引入了许多新的选择器,这些选择器可以更精确地选择文档中的元素,从而实现更灵活的样式设计。以下是一些常见的CSS3选择器及其优先级:
元素选择器(Element Selector):
选择器名称:例如 p 选择所有 <p> 元素。
优先级:较低,优先级为 1。
类选择器(Class Selector):
选择器名称:以 . 开头,例如 .my-class。
优先级:中等,优先级为 10。
ID选择器(ID Selector):
选择器名称:以 # 开头,例如 #my-id。
优先级:较高,优先级为 100。
属性选择器(Attribute Selector):
选择器名称:例如 [type="text"] 选择所有 type 属性为 text 的元素。
优先级:中等,优先级为 10。
伪类选择器(Pseudo-class Selector):
选择器名称:例如 :hover 选择鼠标悬停的元素。
优先级:中等,优先级为 10。
伪元素选择器(Pseudo-element Selector):
选择器名称:例如 ::before 在元素之前插入内容。
优先级:中等,优先级为 10。
子元素选择器(Child Selector):
选择器名称:例如 div > p 选择所有 <p> 元素,作为 <div> 元素的直接子元素。
优先级:较高,优先级为 10。
通用选择器(Universal Selector):
选择器名称:* 选择所有元素。
优先级:较低,优先级为 0。
在CSS中,选择器的优先级决定了当多个规则应用到同一个元素时,哪一个规则会被应用。优先级通常按照以下顺序计算:ID 选择器 > 类选择器、属性选择器、伪类选择器 > 元素选择器、伪元素选择器 > 通用选择器。如果优先级相同,则后定义的规则会覆盖先定义的规则。