一.选择器补充
1.群组选择器
div,span. .red. #div{
background-color:red;
}
特点:
- 一次性控制多个选择器
- 选择器之间以逗号隔开,每一个选择器均可以为任意合法选择器或选择器组合
2.子代(后代)选择器
子代选择器用>连接
body>div{
color:red;
}
后代选择器用空格连接
.sup .sub{
color:cyan;
}
特点:
- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系
3.相邻(兄弟)选择器
相邻选择器用加号连接
.d1 + .d2{
color:tan;
}
兄弟选择器用~连接
.d1 ~ .d2{
color:green
}
特点:
- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系
4.交集选择器
<div class="d1" id="d2"></div>
div.d1#d2{
color:blue;
}
<div class="d1 d2 d3"></div>
.d1.d2.d3{
color:yellow;
}
5.属性选择器
- [attr]：匹配拥有attr属性的标签
- [attr=val]：匹配拥有attr属性，属性值为val的标签
- [attr^=val]：匹配拥有attr属性，属性值以val开头的标签
- [attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
- [attr*=val]：匹配拥有attr属性，属性值包含val的标签
6.组合选择器优先级
组合选择器优先级与权值有关,权值为权重和.
权重对应关系
| 选择器 | 权重 |
|---|---|
| 通配 | 1 |
| 标签 | 10 |
| 类和属性 | 100 |
| id | 1000 |
| !important | 10000 |
选择器权值比较,只关心权重和,不关心选择器位置.
不同级别的选择器间不具备可比性,如:一个类选择器优先级高于n个标签选择器的任意组合.
二.标签a. img与list
1.a标签
常用语法
<a href="https://www.baidu.com">前往百度</a>
<a href="./index.html">前往主页</a>
相对路径
以当前文件作为参考,"."代表当前路径,".."代表上一级目录
常用属性
title:鼠标悬浮时的文本提示
target:_self | _blank 目标位置
其他用法
mailto:邮件给...
tel:打电话给...
sms:发信息给...
a标签reset操作
a {
color: #333;
text-decoration: none;
outline: 0;
}
锚点
① <a href="#tag">前往锚点</a> <a name="tag" des="锚点"></a>
② <a href="#tag">前往锚点</a> <i id="tag" des="锚点"></i>
2.img标签
常用语法
<img src="https://image/icon.gif" />
<img src="./icon.gif" />
常用属性
alt:异常解释
title:图片解释
3.list列表
有序列表
<ol>
<li></li>
<li></li>
</ol>
无序列表
<ul>
<li></li>
<li></li>
</ul>
列表的reset操作
ol, ul {
margin: 0;
padding: 0;
list-style:none;
}
三.伪类选择器
1.a标签四大伪类
- :link：未访问状态
- :hover：悬浮状态
- :active：活跃状态
- :visited：已访问状态
2.内容伪类
- :before：内容之前
- :after：内容之后
:before, :after {
content: "ctn";
}
3.索引伪类
- :nth-child(n)：位置优先，再匹配类型
- :nth-of-type(n)：类型优先，再匹配位置
v_hint：值可以为位置数，也可以为2n、3n...，代表2的倍数，3的倍数，且位置数从1开始
4.取反伪类
- :not(selector)：对selector进行取反