选择器进阶
1.1后代选择器：空格
作用:根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法:选择器1 选择器2{ Css }
结果:
在选择器1所找到标签的后代(儿子、孙子、重孙子…) 中，找到满足选择器2的标签，设置样式
注意点:
- 后代包括:儿子、孙子、重孙…
- 后代选择器中， 选择器与选择器之前通过空格隔开
示例：
<!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>
div p{
color: blue;
}
</style>
</head>
<body>
<p>345</p>
<div>
<p>
124
</p>
</div>
</body>
</html>
效果：
1.2子代选择器：>
作用:根据HTML标签的嵌套关系,选择父元素子代中满足条件的元素
选择器语法:选择器1 >选择器2{ Css }
结果:
- 在选择器1所找到标签的子代(儿子)中，找到满足选择器2的标签,设置样式
注意点:
- 子代只包括:儿子
- 子代选择器中,选择器与选择器之前通过>隔开
示例:
<!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>
div>p>a{
color: red;
}
</style>
</head>
<body>
<div>
<a href="#">这是div里的a</a>
<p>
<a href="#">这是div里p的里面的a</a>
</p>
</div>
</body>
</html>
效果：
1.3并集选择器：,
作用:同时选择多组标签，设置相同的样式
选择器语法:
选择器1,
选择器2 { CSs }
结果: 找到选择器1和选择器2选中的标签，设置样式
注意点:
- 并集选择器中的每组选择器之间通过,分隔
- 并集 选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常一行写一 个，提高代码的可读性
示例：
<!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>
p,
div,
h1,
.a1{
color: pink;
}
</style>
</head>
<body>
<p>ppp</p>
<div>divdivdiv</div>
<h1>h1h1h1</h1>
<h2>h2h2h2h2</h2>
<span>spanpspan</span>
<br>
<a href="#" class="a1">aaaaa</a>
</body>
</html>
效果：
1.4交集选择器：.
作用:选中页面中同时满足多个选择器的标签
选择器语法:选择器1.选择器2 { css }
结果:
- (既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
注意点:
- 交集选择器中的选择器之间是紧挨着的
- 交集选择器中如果有标签选择器， 标签选择器必须写在最前面
示例:
<!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>
p.box{
color: pink;
}
</style>
</head>
<body>
<p class="box">这是p标签：box</p>
<p>ppppp</p>
<div class="box">这是div标签：box</div>
</body>
</html>
效果：
1.5伪类选择器
作用:选中鼠标悬停在元素上的状态，设置样式
选择器语法: 选择器:hover{ css }
注意点: 伪类选择器选中的元素的某种状态
示例:
<!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>
a:hover{
color: pink;
background-color: purple;
}
div:hover{
color: green;
}
</style>
</head>
<body>
<a href="#">我是a标签</a>
<div>我是div标签</div>
</body>
</html>
1.6emmet语法
1.7背景颜色
属性名：background-color
注意点:
- 背景颜色默认值是透明: rgba(0,0,0,0) 、transparent
- 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
示例：
<!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>
p{
width: 400px;
height: 400px;
background-color: rgb(255, 192, 203);
}
div{
width: 400px;
height: 400px;
background-color: rgba(255, 192, 203, 0.5);
}
</style>
</head>
<body>
<p>你是谁</p>
<div>我是大概</div>
</body>
</html>
效果：
1.8背景图片：
属性名: background-image(bgi)
属性值: background- image: url( ‘图片的路径’);
注意点:
- 背景图片中urI中可以省略引号
- 背景图片默认是在水平和垂直方向平铺的
- 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
示例：
<!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>
div{
width: 400px;
height: 400px;
background-image: url('../IntelliJ IDEA/./picture/24.jpg');
color: white;
}
</style>
</head>
<body>
<div>你好啊</div>
</body>
</html>
效果：
1.9背景平铺:
属性名: background-repeat(bgr)
属性值:
| 取值 | 效果 |
|---|---|
| repeat | (默认值)水平和垂直方向都平铺 |
| no-repeat | 不平铺 |
| repeat-x | 沿着水平方向(x轴)平铺 |
| repeat-y | 沿着垂直方向(y轴)平铺 |
示例:
<!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>
div{
width: 400px;
height: 400px;
background-image: url('../IntelliJ IDEA/./picture/24.jpg');
background-color: pink; /*背景图片在背景颜色的上边*/
background-repeat: no-repeat;
color: white;
}
</style>
</head>
<body>
<div>你好啊</div>
</body>
</html>
效果：
1.10背景位置
- 当水平方向和垂直方向都使用center时,可以简写成一个center
示例:
<!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>
div{
width: 400px;
height: 400px;
background-image: url('../IntelliJ IDEA/./picture/24.jpg');
background-color: pink; /*背景图片在背景颜色的上边*/
background-repeat: no-repeat;
background-position: right bottom;
color: white;
}
</style>
</head>
<body>
<div>你好啊</div>
</body>
</html>
效果：
1.11背景相关属性的连写形式
属性名: background (bg)
属性值:
- 单个属性值的合写，取值之间以空格隔开
书写顺序:
- 推荐: background: color image repeat position
省略问题:
-
可以按照需求省略
-
特殊情况:在pc端，如果盒子大小和背景图片大小一样,此时可以直接写background: url()
注意点
- 如果需要设置单独的样式和连写
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
示例：
<!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>
div{
width: 400px;
height: 400px;
background: pink url('../IntelliJ IDEA/./picture/24.jpg') no-repeat center bottom;
color: white;
}
</style>
</head>
<body>
<div>你好啊</div>
</body>
</html>
效果:
1.12img标签和背景图片有什么区别
需求:需要在网页中展示一张图片的效果?
选择：
- 关键性、重要的、缺了这张图片影响很大就用img；
- 装饰性、不太重要的这种图片就用背景图片；
方法一: 直接写上img标签即可
- img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二: div标签+背景图片
- 需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
显示模式
2.1块级元素
显示特点:
-
独占一行(一行只能显示一个)
-
宽度默认是父元素的宽度， 高度默认由内容撑开
-
可以设置宽高
代表标签:
- div、p、 h系列、ul、 li、dl、 dt、 dd、form、 header、 nav、 fote…
2.2行内元素
显示特点:
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签:
- a、span、 b、u、i、S、strong、 ins、 em、de…
2.3行内块元素
显示特点:
- 一行可以显示多个
- 可以设置宽高
代表标签:
- input、textarea、 button、 selec.t…
- 特殊情况: img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
2.4元素显示模式转换
目的:改变元素默认的显示特点，让元素符合布局要求
语法:
| 属性 | 效果 | 使用频率 |
|---|---|---|
| display: block | 转换成块级元素 | 较多 |
| display:inline-block | 转换成行内块元素 | 较多 |
| display:inline | 转换成行内元素 | 极少 |
示例：
<!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>
.d1{
width: 200px;
height: 200px;
background-color: pink;
}
.d2{
width: 200px;
height: 200px;
background-color: green;
display: inline-block;
}
.d3{
width: 200px;
height: 200px;
background-color: red;
display: inline;
}
</style>
</head>
<body>
<div class="d1">你好啊</div>
<div class="d1">我的</div>
<div class="d2">你好啊</div>
<div class="d2">我的</div>
<div class="d3">你好啊</div>
<div class="d3">我的</div>
</body>
</html>
效果：
2.5HTML嵌套规范注意点
-
块级元素一般作为大容器， 可以嵌套:文本、块级元素、行内元素、行内块元素等等…
- 但是: p标签中不要嵌套div、p、h等块级元素
-
a标签内部可以嵌套任意元素
- 但是: a标签不能嵌套a标签
CSS特性
3.1.1继承性
- 特性:子元素有默认继承父元素样式的特点(子承父业)
- 可以继承的常见属性(文字控制属性都可以继承)
-
color
-
font-style、font-weight、 font- size、font-family
-
text-indent、text align
-
line-height
-
…
注意点:
- 可以通过调试工具判断样式是否可以继承
3.1.2(拓展)继承失效的特殊情况
- 如果元素有浏览器默认样式， 此时继承性依然存在，但是优先显示浏览器的默认样式
- a标签的color会继承失效
- h系列标签的font-size会继承失效
示例：
<!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>
div{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<div>
divdiv
<p>pppp</p>
<a href="#">aaaa</a>
<h1>h1h1h1h1h1</h1>
</div>
</body>
</html>
效果：
3.2层叠性
- 特性：
- 给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上
- 给同一 个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效
- 注意点:
- 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
示例:
<!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>
div{
color: red;
color: blue;
}
.d1{
font-size: 40px;
}
</style>
</head>
<body>
<div class="d1">你是我的宝贝</div>
</body>
</html>
效果：
3.3优先性
3.3.1基础选择器
特性:不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式:
- 继承<通配符选择器<标签选择器<类选择器< id选择器<行内样式< !important
- 只要记住范围越大的优先级越低
注意点:
- !important写在属性值的后面， 分号的前面!
- !important不能提升继承的优先级， 只要是继承优先级最低!
- 实际开发中不建议使用 !important。
示例：
<!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>
#box{
color: brown;
}
.box{
color: pink;
}
div{
/* 给去掉继承的之后的优先级最低的加!important */
color: blue !important;
}
body{
color: red;
}
</style>
</head>
<body>
<div class="box" id="box" style="color: orange;">123</div>
</body>
</html>
效果：
复合选择器：
示例：
<!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>
/* (行内，id，类，标签) */
/* (0,1,0,1) */
div #one{
color: orange;
}
/* (0,0,2,0) */
.father .son{
color: skyblue;
}
/* (0,0,1,1) */
.father p{
color: purple;
}
/* (0,0,0,2) */
div p{
color: pink;
}
</style>
</head>
<body>
<div class="father">
<p class="son" id="one">我是一个标签</p>
</div>
</body>
</html>
效果：
9623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
