一、伪类选择器
同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
>:link “链接”:超链接点击之前
>:visited “访问过的”:超链接被访问过之后
(↑只适用于超链接)
>:hover “悬停”:鼠标放到标签上的时候
>:active “激活”: 鼠标点击标签,但是不松手时。
(↑适用于所有元素)
/*让超链接点击之前是红色*/
a:link{
color:red;
}
/*让超链接点击之后是橘色*/
a:visited{
color:orange;
}
/*鼠标悬停,放到标签上的时候是绿色*/
a:hover{
color:green;
}
/*鼠标点击链接,但是不松手的时候是黑色*/
a:active{
color:black;
}
```
记住,在css中,这四种状态必须按照固定的顺序写:
a:link 、a:visited 、a:hover 、a:active
如果不按照顺序,那么将失效。“爱恨准则”:love hate。必须先爱,后恨。
二、css3新增伪类选择器
2.1:first-child 选择器
:first-child 选择器匹配其父元素中的第一个子元素。
/* 列表中的第一个 <li>元素选择的样式: */
li:first-child{
background:yellow;
}
2.2:last-child 选择器
:last-child选择器用来匹配父元素中最后一个子元素。
/* 指定最后一个p元素的背景色: */
p:last-child{
background:#ff0000;
}
2.3:nth-child ()选择器
:nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。
n 可以是一个数字,一个关键字,或者一个公式。
奇数和偶数是可以作为关键字使用用于相匹配的子元素,其索引是奇数或偶数(该索引的第一个子节点是1)。 在这里,我们为奇数和偶数p元素指定两个不同的背景颜色:
p:nth-child(odd){
background:#ff0000;
}
p:nth-child(even){
background:#0000ff;
}
p:nth-child(3){
background:#00ff00;
}
p:nth-child(4n){
background:#00ffff;
}
2.4:first-of-type 选择器
:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。
提示: 和 :nth-of-type(1) 是一个意思。
/* 选择的 p 元素是其父元素的第一个 p 元素: */
p:first-of-type {
background:#ff0000;
}
2.5:last-of-type 选择器
:last-of-type选择器匹配元素其父级是特定类型的最后一个子元素。
提示: 和:nth-last-of-type(1)是一个意思。
/* 指定其父级的最后一个p元素的背景色: */
p:last-of-type{
background:#ff0000;
}
2.6:nth-last-child() 选择器
:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
n可以是一个数字,一个关键字,或者一个公式。
/* 指定每个 p 元素匹配同类型中的倒数第 2 个同级兄弟元素背景色: */
p:nth-last-child(2) {
background:#ff0000;
}
2.7:nth-of-type() 选择器
:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
n可以是一个数字,一个关键字,或者一个公式。
/* 指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色: */
p:nth-of-type(2){
background:#ff0000;
}
2.8:not() 选择器
:not(selector) 选择器匹配每个元素不是指定的元素/选择器。
/* 为每个并非<p>元素的元素设置背景颜色: */
:not(p){
background:#ff0000;
}
三、浮动
3.1.概念
浮动视定了元素往娜个方问浮动(只有左两个方问)。
任何元素都可以浮动,元素浮动后转换为块级元素。
3.2作用
1)图片坏绕
2)布局(块级元素水平显示)
3.3原理
1)浮动元素脱离文档流(元素在页面不占据位置)
2)浮动元素碰到包含框或者浮动元素的边框会停止(浮动元素不会重叠)
3)元素只有左右浮动
4)所有元素都可以浮动,浮动后转换为块级元素
5)块级元素默认宽度变为由内容撑开
6)开启BFC格式,块级格式上下文,变为独立的一块,布局不受子元素和父元素的影响
fLoat.:Left|right/none:
3.4清除浮动影响的方法:
1)父元素加高度(高度已知)
2)父元素overfLow:hidden;(自动找高度)
3)受影响的元素加cLear:both;(元素回到正常的位置,父元素的高度没有找)
4)空div法(在浮动元素后加空div,<div cLass="cLear"></div>,cLear{cLear:both;})(空div回到正常位置,父元素高度找到,但是页面新增无语义的空元素)
5)伪对象法
四、 元素定位 position
4.1 作用
定义元素在页面的位置
4.2 属性值
static 默认值 静态定位
relative 相对定位
fixed 固定定位
sticky 粘性定位
absolute 绝对定位
4.3 relative 相对定位
相对于自己原位置定位,定位后原位置保留
配合left、right、top、bottom移动,当四个属性同时存在,left、top生效
当参照点为左上(left/top):取正值,往右下移动;取负值,往左上移动
当参照点为右下(right/bottom):取正值,往左上移动;取负值,往右下移动
.box1{
width: 200px;
height: 200px;
background-color: pink;
/* 相对定位,相对于自己原位置定位 */
position: relative;
/* 配合top、bottom、left、right移动 ,当四个属性同时存在,left和top生效*/
top: -50px;
/* left: 50px; */
right: 50px;
}
.box2{
width: 200px;
height: 200px;
background-color: plum;
}
应用场景:
1)配合绝对定位使用
2)自己小范围移动
4.4 fixed 固定定位
相对于浏览器窗口定位,定位后原位置不保留(脱离文档流)
配合left、right、top、bottom移动,当四个属性同时存在,left、top生效
当参照点为左上(left/top):取正值,往右下移动;取负值,往左上移动
当参照点为右下(right/bottom):取正值,往左上移动;取负值,往右下移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 3000px;
}
.box1 {
width: 50px;
height: 50px;
background-color: skyblue;
/* 元素固定定位,参照点浏览器窗口 */
position: fixed;
right: 20px;
bottom: 20px;
}
.box2 {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">返回页面顶部</div>
<div class="box2"></div>
</body>
</html>
应用场景:
固定在页面某个位置,例如返回页面顶部等
4.5 sticky 粘性定位
相对于相对定位(参照点为自己的原位置)和固定位(参照点为浏览器窗口)的结合
配合left、right、top、bottom移动,当四个属性同时存在,left、top生效
默认相对定位,当到达临界点,变为固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 3000px;
}
.header{
width: 100%;
height: 45px;
background-color: pink;
}
.nav{
width: 100%;
height: 75px;
background-color: paleturquoise;
/* 相对定位和固定定位的结合 */
position: sticky;
/* 默认是相对定位,相对于自己原位置移动0 0,后面变为固定定位,相对于浏览器窗口0 0 */
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="nav"></div>
</body>
</html>
4.6 absolute 绝对定位
相对于static以外的第一个父元素定位,如果父元素没有定位,逐级往上找,最后相对于初级包含框定位(视口)
如果需要相对于body定位,body{position:relative;},绝对定位后原位置不保留(脱离文档流)
配合left、right、top、bottom移动,当四个属性同时存在,left、top生效
当参照点为左上(left/top):取正值,往右下移动;取负值,往左上移动
当参照点为右下(right/bottom):取正值,往左上移动;取负值,往右下移动
应用场景:
形成独立的一层