【学习笔记】CSS的各种选择器们

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

id选择器

1
2
3
#id1 {
...
}

元素选择器

1
2
3
h1 {
...
}

类选择器

1
2
3
.class {
...
}

属性选择器

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

后代选择器

1
2
3
4
5
6
7
.class1 .class2 {
...
}
/* or */
div .class1 .class2 {
...
}

相邻 & 通用相邻选择器

1
2
3
4
5
6
7
8
/* 选中div中class1后面的那一个元素 */
.class1 + div {
...
}
/* 选中div中class1后面的所有元素 */
.class1 ~ div {
...
}

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

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

选择器的权重


【学习笔记】CSS的各种选择器们
https://www.qwqwq.com.cn/note/css-choice/
Author
Stephen Zeng
Posted on
June 19, 2024
Licensed under