css css3选择器 合集

普通选择器

• 通配符选择器 选择所有元素
• HTML标签选择器 选择HTML标签
• ID选择器 选择id属性元素
• class类选择器 选择class属性元素
• 包含选择器 选择后代元素
• 子选择器 选择子元素
• 相邻选择器 选择后面紧邻的兄弟元素
• 兄弟选择器 CSS3选择后面相邻的所有兄弟元素

属性选择器

• [attr] 具有attr属性的元素
• [attr = val] 值等于指定值的元素
• [attr~ = val] 选择包含指定值的元素
• [attr^ = val] CSS3选择指定值开头的元素
• [attr$ = val] CSS3选择指定值结尾的元素
• [attr* = val] CSS3包含指定值的元素
• [attr| = val] 选择指定值开头

动态伪类选择器

• :link 超链接
• :visited 链接已被访问过
• :hover 鼠标悬停
• :active 被激活时

结构性伪类选择器

• :lang() 选择带有lang属性元素
• :not() CSS3排除某类元素
• :root CSS3选择根元素
• :first-child CSS3第一个元素
• :last-child CSS3最后一个子元素
• :only-child CSS3仅有的一个子元素
• :nth-child() CSS3第n个子元素
• :nth-last-child() CSS3倒数第n个子元素
• :first-of-type CSS3第一个同级兄弟元素
• :last-of-type CSS3最后一个同级兄弟元素
• :only-of-type CSS3唯一的一个同级兄弟元素
• :nth-of-type() CSS3第n个同级兄弟元素
• :nth-last-of-type() CSS3倒数第n个同级兄弟元素
• :empty CSS3没有任何子元素
• :target CSS3URL指向的元素

UI元素状态伪类选择器

• :focus 输入焦点
• :checked CSS3选中状态的元素
• :enabled CSS3可用状态的元素
• :disabled CSS3禁用状态的元素
• :read-only CSS3只读状态的元素
• :read-write CSS3能编辑的元素
• :optional CSS3选择非必填元素
• :required CSS3选择必填元素
• :in-range CSS3选择有限定范围的元素
• :indeterminate CSS3选择处于不确定状态的表单元素
• :default CSS3默认状态的表单元素
• :focus-within CSS3元素或者后代元素获得焦点
• :out-of-range CSS3当值处于范围之外

伪对象选择器

• ::first-letter CSS3第一个字符的样式
• ::first-line CSS3第一行的样式
• ::before CSS3对象前发生的内容
• ::after CSS3对象后发生的内容
• ::placeholder CSS3设置文字占位符
• ::selection CSS3设置选择框样式
• ::cue CSS3字幕提示

详细细节

https://www.lanmper.cn/css/c2.html