【前端笔记】CSS的各种选择器们

图片来源：表严肃https://biaoyansu.com/
这上面的课讲得挺好的，建议去听一听。

id选择器

#id1 {
	...
}

元素选择器

h1 {
	...
}

类选择器

.class {
	...
}

属性选择器

/* 以botton的属性为例 */
[title="abc"] {
	...
}

后代选择器

.class1 .class2 {
	...
}
/* or */
div .class1 .class2 {
	...
}

相邻 & 通用相邻选择器

/* 选中div中class1后面的那一个元素 */
.class1 + div {
	...
}
/* 选中div中class1后面的所有元素 */
.class1 ~ div {
	...
}

伪类选择器 & 伪元素选择器

与类选择器和元素选择器的语法相同，只是不需要定义，CSS自带。

选择器的权重