还有很多很多选择器，这里仅列出常用的
目录
- 1. 标签选择器
- 2. 类选择器
- 3. id选择器
- 4. 通配符选择器
- 5. 后代选择器
- 6. 子代选择器
- 7. 并集选择器
- 8. 兄弟选择器
- 9. focus伪类选择器
- 10. 链接伪类选择器
- 11. 属性选择器
- 12. 结构伪类选择器
- 13. 伪元素选择器
1. 标签选择器
- 直接根据标签名选择即可
div {
这里书写属性
}
2. 类选择器
- 被选择标签需要有class属性
.xx {
使用'.属性名'来选择标签
}
3. id选择器
- 被选择标签需要有id属性
#xx {
使用'#属性名'来选择标签
}
4. 通配符选择器
- 选择全部标签，一般用来初始化页面元素
* {
margin: 0;
padding: 0;
}
5. 后代选择器
div a span {
选择div下面的a下面的span
}
6. 子代选择器
div > a {
选择div下一级的a元素，仅针对'下一级'
}
7. 并集选择器
div a,
span a {
}
8. 兄弟选择器
- 操作对象是与该元素相同父亲，且相邻的元素
- 选中该元素的兄弟元素
a + span {
选择a元素的兄弟元素span
}
9. focus伪类选择器
a:focus {
选择已经获取焦点的标签
}
input:focus {
}
10. 链接伪类选择器
- 如果混合使用，需要按照 " link、visited、hover、active " 的顺序书写，否则浏览器可能无法正常显示这4种样式
a:link {
选择鼠标未点击的
}
a:visited {
选择鼠标已经点击过的
}
a:hover {
选择鼠标经过
-- 该伪类可以定义任何一个元素在鼠标经过时的样式
}
a:active {
选择鼠标点击未弹开
}
11. 属性选择器
E[YY] {
选择有YY属性的元素
}
E[YY = "ZZ"] {
选择有YY属性，且属性值等于ZZ的元素
}
E[YY ^= icon] {
选择有YY属性，且属性值是以icon开头的元素
}
E[YY $= icon] {
选择有YY属性，且属性值是以icon结尾的元素
}
E[YY *= icon] {
选择有YY属性，且属性值包含icon的元素
}
12. 结构伪类选择器
- n的说明：本质上就是选中第几个子元素
| 当n等于什么时 | n的意义 |
|---|---|
| 1 2 3 … n | 选中第几个子元素 |
| even(偶数)、odd(奇数) | 选中全部的奇数或偶数 |
| 公式 | 2n(0 2 4 6 … )、5-n(5 4 3 2 1 0) 、、、、、、 |
| n=0或n>max | 忽略不计 |
(1) child选择器
- 功能：选择有父级元素的第 n 个 XX元素，先关注是第几个孩子，再判断类型是否符合
- 先找到有父级元素的第 n 个 XX元素，之后判断是不是指定元素
- 是，选择这个元素
- 不是，不选择这个元素
li:first-child {
找到同一级中的第 1 个子元素
判断是不是 li
}
li:last-child {
找到同一级中的 最后1个 子元素
判断是不是 li
}
li:nth-child(n) {
找到同一级中的第 n 个子元素
判断是不是 li
}
(2) type选择器
- 与child选择器功能一样，只不过type是先找出所有符号类型要求的元素，再关注第几个
li:first-of-type {
}
li:last-of-type {
}
li:nth-of-type(n) {
}
13. 伪元素选择器
- 必须要有 content 属性，否则不起效果
- before 在内容前面，after 在内容后面
- before 和 after 创建的是一个元素，但是属于行内元素
- 伪元素和标签选择器一样，权重为 1
- 创建出来的元素在 Dom 中查找不到，所以称为伪元素
p:before {
content: '前面前面';
color: red;
}
p:after {
content: '后面后面';
color: yellow;
}