选择器
# Emmet语法
Emmet语法的前身是Zen coding, 它使用缩写来提高HTML/CSS的编写速度
# html快捷
直接输入标签名+TAB键 ——生成标签
标签名*N + TAB —— 生成多个标签
父子级标签生成 使用
>如： ul>li兄弟级标签生成 使用
+如：div+p带类名或带ID名标签生成 标签.name 标签#name
如果生成的div类名是有顺序的，可以用自增符号
$.demo$*5如果想要生成的标签内部有内容 标签名+
{}+TAB键
语法可以混合使用
# css快捷
缩写... 这玩意不是编辑器自带的快捷键嘛...
.one {
text-align: center -> tac
width: 100px -> w100 + TAB
height: 100px -> h100 + TAB
text-indent: 2em -> ti2em + TAB
line-height: 20px lh20 + TAB
text-decoration: none -> tdn + TAB
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 复合选择器
可以更准确、高效的选择目标标签
由两个或多个基础选择器， 使用不同的方式组合而成
常用的复合选择器：后代选择器、子选择器、并集选择器、伪类选择器
# 后代选择器
可以选择 父元素 里的 子元素
<style>
ol li {
键值对
}
</style>
1
2
3
4
5
2
3
4
5
注意：
- 选择器之间 用逗号隔开
- 外层选择器 只能是父级 最终选择的是 最内层的选择器
- 可以是任何基础选择器
# 子选择器
只能选择某元素最近一级的子元素
<style>
div>p {
}
</style>
1
2
3
4
5
2
3
4
5
只能选子元素标签
# 并集选择器
可以选择多组标签，同时为他们定义相同的样式
任何形式的选择器都可以作为并集选择器的部分
<style>
div,p,.pig li{
键值对
}
</style>
1
2
3
4
5
2
3
4
5
# 交集选择器
从两个集合中选择他们相同的部分
<style>
div.name
</style>
1
2
3
2
3
注意：
- 两个选择器是紧密挨着的，中间不能有其他任何东西
- 如果交集选择器中标签选择器，标签选择器写在最开头
- 交集选择器可以同时写多个选择器
# 伪类选择器
伪类选择器用于某些选择器添加特殊的效果，比如给链接添加特殊效果
伪类选择器书写 使用
:
# 链接伪类
- a:link 选择所有未被访问的链接
- a:visited 选择所有已被访问的链接
- a:hover 选择鼠标指针位于其上的链接
- a:active 选择活动链接（鼠标按下未弹起）
<style>
a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
选择器可以使用复合
一般实际应用
a {
...
}
a:hover{
...
}
1
2
3
4
5
6
2
3
4
5
6
# focus选择器
input:focus {
background-color: red;
}
1
2
3
2
3
# 结构伪类选择器
作用与优势
- 作用：根据元素在HTML中的结构关系查找元素
- 优势：减少对于HTML中类的依赖，有利于保持代码整洁
- 场景：常用于查找某父级选择器中的子元素
| 选择器 | 说明 |
|---|---|
| E:first-child {} | 匹配父元素中第一个子元素，并且是E元素 |
| E:last-child {} | 匹配父元素中最后一个子元素，并且是E元素 |
| E:nth-child(n) {} | 匹配父元素中第n个子元素，平且是E元素 |
| E:nth-lsat-child {} | 匹配父元素中倒数第n个子元素，并且是E元素 |
注意是在每个有父级容器的盒子里分别起效
且会断层
# 添加元素
| 伪元素 | 作用 |
|---|---|
| ::before | 在父元素内容的最前添加一个伪元素 |
| ::after | 在父元素内容的最后添加一个伪元素 |
必须加 content 属性 默认是行内元素
编辑 (opens new window)
上次更新: 2023/02/07, 14:51:48