CSS选择器

来源：

MDN

选择器练习网站

基础选择器

表示	名称	解释	备注
#A	ID 选择器	选择 id 为 A 的元素	一个元素只能有一个 id,并作为唯一标识，通常和 js 搭配
.A	类选择器	选择类名为 A 的元素	一个元素可以有多个类名(多类名选择器)
A	标签选择器	选择标签为 A 的元素
*	通配符选择器	选择所有元素	通配符选择器会影响性能，慎用

/* 标签选择器 */
/* 表示选择所有p元素 */
p {
  /* CSS CODE */
}

/* id选择器 */
/* 表示选择id为text的元素 */
#text {
  /* CSS CODE */
}

/* 类选择器 */
/* 表示选择所有类名为style_red的元素 */
.style_red {
  /* CSS CODE */
}

/* 通配符选择器 */
/* 表示选择所有元素 */
* {
  /* CSS CODE */
}

权重：id > class > 元素 > *

复合选择器

表示	名称	解释	备注
AB	交集选择器	既要满足条件 A 又要满足条件 B
A,B	分组选择器（并集选择器）	满足 A 或 B，任一即可
A B	所有后代选择器	选择 A 中的所有 B（子孙后代）
A>B	子选择器	只选择 A 的子元素 B
A+B	相邻兄弟选择器	只选择和 A 紧挨着的 B
A~B	所有兄弟选择器	选择 A 相邻的所有 B

/* 交集选择器 */
/* 对class为red的div元素设置对应的样式  */
div.red {
  /* CSS CODE */
}

/*分组选择器 */
/* 表示选择所有text和li元素 */
#text,
li {
  /* CSS CODE */
}

/* 后代选择器 */
/* 表示选择p下面的所有strong元素 */
p strong {
  /* CSS CODE */
}

/*子选择器 */
/* 表示选择class为style_red里面的div元素 */
.style_red > div {
  /* CSS CODE */
}

/*相邻兄弟选择器 */
/* 表示选择与ul相邻的第一个span元素 */
ul + span {
  /* CSS CODE */
}

/*所有兄弟选择器 */
/* 表示选择与ul相邻的所有span元素 */
ul ~ span {
  /* CSS CODE */
}

属性选择器

符号	名称	解释	备注
E[att]		选择具有 att 属性的 E 元素
E[att="val"]		选择具有 att 属性且属性值等于 val 的 E 元素
E[att^="val"]		选择具有 att 属性且值以 val 开头的 E 元素
E[att$="val"]		选择具有 att 属性且值以 val 结尾的 E 元素
E[att*="val"]		选择具有 att 属性且值中含有 val 的 E 元素

/* 拥有属性type的所有input元素 */
input[type] {
  /* CSS CODE */
}

/* type属性为text的所有input元素 */
input[type="text"] {
  /* CSS CODE */
}

/* type属性以"pass"开头的所有input元素 */
input[type^="pass"] {
  /* CSS CODE */
}

/*type属性以"t"结尾的所有input元素 */
input[type$="t"] {
  /* CSS CODE */
}

/*type属性含有"t"的所有input元素 */
input[type*="t"] {
  /* CSS CODE */
}

伪类选择器

什么是伪类？

伪类：表示不存在的类，特殊的类。

1. 伪类用来描述一个元素的特殊状态。比如：第一个子元素、被点击的元素、鼠标移入的元素
2. 伪类一般情况下使用 ："冒号"开头

链接伪类

符号	名称	解释	备注
a:link		选择所有未被访问的链接
a:visited		选择所有已被访问的链接	由于隐私的原因，所以 visited 只能修改链接的颜色
a:hover		选择所有鼠标指针位于其上的链接
a:active		择所有鼠标按下未弹起的链接

注意：严格按照此顺序来书写 link>visited>hover>active

a:link {
  /* CSS CODE */
}
a:visited {
  /* CSS CODE */
}
a:hover {
  /* CSS CODE */
}
a:active {
  /* CSS CODE */
}

其他伪类

符号	名称	解释	备注
E:first-child		匹配父元素 E 中的第一个子元素
E:last-child		匹配父元素 E 中的最后一个子元素
E:nth-child(n)		匹配父元素 E 中的第 n 个子元素
E:first-of-type		匹配父元素 E 中指定类型的第一个子元素
E:last-of-type		匹配父元素 E 中指定类型的最后一个子元素
E:nth-of-type(n)		匹配父元素 E 中指定类型的第 n 个子元素
E:not()		匹配除了 E 元素
input:focus		匹配获得焦点的表单元素
:root		选中的是根元素（html 元素）
E:empty		选中为空的 E 元素
input:disabled		选中被禁用的 input 元素
input:enabled		选中的是可用的 input 元素
input:checked		选中的是勾选的复选框或单选框

/* 表示匹配ul中的第一个li元素，并且li是ul中的首个元素（如果不是，则此选择器无效） */
ul > li:first-child {
  /* CSS CODE */
}

/* 表示匹配ul中的最后一个li元素，并且li是ul中的末尾元素（如果不是，则此选择器无效） */
ul > li:last-child {
  /* CSS CODE */
}

/* 表示匹配ul中的第一个li元素(可以不是首个) */
ul li:first-of-type {
  /* CSS CODE */
}

/* 表示匹配ul中的最后一个li元素(可以不是最后一个) */
ul li:last-of-type {
  /* CSS CODE */
}

/* 表示ul中除了第三个li,剩余的设置样式 */
ul > li:not(:nth-of-type(3)) {
  /* CSS CODE */
}

/* 当鼠标点击在input输入框内，添加此样式 */
input:focus {
  /* CSS CODE */
}

E:nth-child(n)中的特殊用法

此处的 n 可以是数字，关键字或者公式

参考值	含义
2n 或者 even	表示偶数
2n+1 或者 odd	表示奇数
5n	表示 5 的倍数
n+5	从第五个开始（包含第五个）到最后-n+5
-n+5	前五个（包含第五个）
n	第 n 个

/* 表示匹配table中的子元素tr,并且行数为偶数 */
table > tr:nth-child(even) {
  /* CSS CODE */
}

table > tr:nth-child(2n) {
  /* CSS CODE */
}

/* 表示匹配table中的子元素tr,并且行数为奇数 */
table > tr:nth-child(odd) {
  /* CSS CODE */
}

table > tr:nth-child(2n + 1) {
  /* CSS CODE */
}

/* 表示匹配table中的所有子元素tr（n）此处字母n表示所有 */
table tr:nth-child(n) {
  /* CSS CODE */
}

/* 表示匹配table中的第三个tr */
table tr:nth-child(3) {
  /* CSS CODE */
}

/* 表示匹配table中前五个tr，包含第五个 */
table tr:nth-child(-n + 5) {
  /* CSS CODE */
}

E:first-child 和 E:first-of-type 的区别？

1. E:first-child:必须是父元素下的首个子元素，然后再看是不是指定的元素类型
2. E:first-of-type:不论是不是父元素下的第一个子元素，只要是指定类型的第一个元素就可以

伪元素选择器

符号	名称	解释	备注
::before		在元素内部的前面插入内容	开发中常用
::after		在元素内部的后面插入内容	开发中常用
E::first-letter		匹配 E 元素中的第一个字符
E::first-line		匹配 E 元素中的第一行字符
E::selection		匹配 E 元素中鼠标选中的内容
input::placeholder		选中的是 input 元素中的提示文本

注意：

1. 通过伪元素新创建的元素在文档树中是找不到的，所以称为伪元素
2. ::before 和::after 必须有content属性
3. 通过::before 和::after 创建的元素默认为行内元素
4. 大部分 input 元素都不支持伪类。如 text,button 等

/*给ul中的li元素之前添加《*/
ul > li::before {
  content: "《";
  /* CSS CODE */
}
/*给ul中的li元素之后添加》*/
ul > li::after {
  content: "》";
  /* CSS CODE */
}
/* 表示给p中的第一个字符设置样式  */
p::first-letter {
  /* CSS CODE */
}
/* 表示给p中的第一行文字设置样式  */
p::first-line {
  /* CSS CODE */
}
/* 表示给p中鼠标选中的内容设置样式  */
p::selection {
  /* CSS CODE */
}

选择器优先级

选择器类型	权重
继承	没有优先级
通配符	0,0,0,0
标签、伪元素	0,0,0,1
类、伪类、属性	0,0,1,0
ID	0,1,0,0
行内样式	1,0,0,0
!important	无穷大

注意:

1. 多种选择器组合使用，权重会叠加
2. 尽量不使用，或者不在万不得已的情况下不使用!important

a标签默认的样式的权重为1，因为使用标签选择器

/* a标签自带样式 */
a {
  color: blue;
  text-decoration: underline;
}