面试题准备（十六）：CSS 选择器 selector

概念

用于在页面中选取我们想要更改样式的元素

分类

1. 简单选择器：元素选择器、类选择器、ID选择器、通用选择器（通配符选择器）、组合选择器
2. 属性选择器
3. 伪类、伪元素

简单选择器

元素选择器

用元素的名称进行选择元素

div {
	...
}
button {
	...
}

类选择器

根据元素的类名选择元素

.wrapper {
	...
}
.content {
	...
}

ID 选择器

根据元素的 id 选择元素

#user {
	...
}
#name {
	...
}

通用选择器

选择全部元素，通常消除元素的默认样式，但这个选择器影响性能，就算要初始化，也是用元素选择器挨个选择消除想要消除默认样式的元素

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

组合选择器

上述选择器经过下列组合，可选择满足条件的元素

组合	描述
E1, E2	选择全部 E1 和 E2 元素
F S	选择满足 S 是 F 后代节点的元素
F > S	选择满足 S 是 F 直接子节点的元素
S1 + S2	选择满足 S2 是 S1 下一个兄弟节点的元素
S1 ~ S2	选择满足 S2 是 S1 后面兄弟节点的元素

div, #name {
	...
}
div input {
	...
}
div > .content {
	...
}
.content1 + .content2 {
	...
}
.content1 ~ .content3 {
	...
}

属性选择器

根据元素特定属性或属性的部分内容选择元素

选择器	描述
[attr]	选择选择一个带有 attr 属性的元素
[attr=value]	选择满足属性 attr 的值为 value 的元素
[attr~=value]	选择满足属性 attr 的值其中一个为 value 的元素
[attr|=value]	选择满足属性 attr 的值以 value 或 value- 开头的元素
[attr^=value]	选择满足属性 attr 的值以 value 开头的元素
[attr$=value]	选择满足属性 attr 的值以 value 结尾的元素
[attr*=value]	选择满足属性 attr 的值字符串中包含 value 的元素

img[src] {
	...
}
a[herf="http://localhost"] {
	...
}
div[class~="banner"] {
	...
}
div[class|="art-"] {
	...
}
div[class^="con"] {
	...
}
div[class$="ent"] {
	...
}
div[class*="nte"] {
	...
}