CSS选择器详解

本文主要论述选择器的详情,及选择器权重优先权

基本选择器

选择器 名称 说明 示例
# id选择器 选择属性为该id的元素 #id{}
. 类选择器 选择属性为class的所有元素 .class{}
tag 标签选择器 选择所有的<tag>元素 div{}
* 通用选择器 选择所有元素 *{}

属性选择器

选择器 名称 说明 示例
[attribute] 通用属性选择器 选择带有 target 属性所有元素 [target]
[attribute=value] 属性值选择器 选择 target=”_blank” 的所有元素 [target=_blank]
[attribute~=value] 包含属性选择器 选择 title 属性包含单词 “flower” 的所有元素 [title~=flower]
[attribute |=value] 开头属性选择器 选择 lang 属性值以 “en” 开头的所有元素 [lang|=en]

关系选择器

选择器 名称 说明 示例
s1,s2,s3 分组选择器 选择多个选择器的元素 .class1,class2
s1 s2 后代选择器 指定选择器的后代元素 div p
s1>s2 子选择器 指定选择器的子元素 div>p
s1+s2 相邻兄弟选择器 选择相邻且之后的元素 div+p
s1~s2 兄弟选择器 选择之后的兄弟元素 div~p

伪类选择器

结构性伪类选择器

选择器 名称 说明
:root 根元素选择器 文档根元素,一般为html
:first-child 子元素选择器 第一个子元素
:last-child 子元素选择器 最后一个子元素
:only-child 子元素选择器 只有一个子元素的
:only-of-type 子元素选择器 子元素只有一种类型的
:nth-child(n) 子元素选择器 第n个子元素

表单元素选择器

选择器 说明
:enabled input非disabled时
:disable input标签disabled时
:checked input标签checked时
:default 选择元素之后插入内容
:valid 选择元素之后插入内容
:invalid 块级首字母
:required 选择元素之前插入内容
:optional 选择元素之后插入内容

enabled和disable对input的大部分type都有效,除了checkbox/radio/range三个外。

valid和invalid,是表单校验时使用,自己手动添加valid和invalid属性无用,必须是inp
ut使用pattern和required校验。

动态伪类选择器

这些选择器可以配合CSS做一些简单动画

选择器 说明
选择器 说明
:link 未被访问时
:visited 已被访问时
:hover 鼠标以上时
:active 访问中跳转页面时
:focus 获得焦点时

伪元素选择器

选择器 说明
::first-line 块级首行
::first-letter 块级首字母
::before 选择元素之前插入内容
::after 选择元素之后插入内容
::selection 光标滑动选择内容

权重值与优先级

选择器权重值

等级 例子 权重值
行内样式 style 1000
ID #nav 100
属性选择器/class/伪类 :hover 10
元素名/伪元素 ::after 1

选择器规则

1.相同的权重:以后面出现的选择器为最后规则

2.不同的权重,权重值高则生效

3.与元素 挨得近 的规则生效,html 中规则的比 CSS 文件的优先

4.!imprtant拥有最高的权重

5.通配符选择器也有权重,权重被认为是 0

6.在css文件上,最后定义的这条规则会覆盖上面与之冲突的规则,也就是说代码行数越大的可以覆盖行数小的

权重计算公式

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

😉😐😡😈🙂😯🙁🙄😛😳😮:mrgreen:😆💡😀👿😥😎😕