本文详细介绍了CSS的选择器进阶，包括复合选择器、子代选择器、并集选择器和交集选择器，以及Emmet语法的使用。此外，还讲解了背景相关属性，如背景颜色、图片、平铺、位置及连写方式。文章还探讨了元素的显示模式，如块级元素、行内元素和行内块元素的转换。最后提到了CSS的继承性和层叠性两大特性。
前端基础-CSS-第2篇
本篇目录
一、选择器进阶
1.复合选择器
1.1后代选择器：空格
- 作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素
- 选择器语法：
选择器1 选择器2 { css } - 结果： 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
- 注意
- 后代包括：儿子、孙子、重孙子……
- 后代选择器中，选择器与选择器之间通过 空格 隔开
- 选择器可以嵌套多个
<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>
.father .son p {
color:red;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<p>小姐姐</p>
</div>
<p>小帅哥</p>
</div>
<p>小哥哥</p>
</body>
</html>
1.2子代选择器：>
- 作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素
- 选择器语法：
选择器1 > 选择器2 { css } - 结果： 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
- 注意：
- 子代只包括：儿子
- 子代选择器中，选择器与选择器之间通过 > 隔开
<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>
.father > p {
color:red;
}
</style>
</head>
<body>
<div class="father">
<p>小可爱</p>
<div>
<p>大可爱</p>
</div>
</div>
<p>大可爱</p>
</body>
</html>
2.并集选择器
并集选择器：,
- 作用：同时选择多组标签，设置相同的样式
- 选择器语法：选择器1 ， 选择器2 { css }
- 结果： 找到 选择器1 和 选择器2 选中的标签，设置样式
- 注意：
- 并集选择器中的每组选择器之间通过 , 分隔
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
<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,
.aa {
color:red;
}
</style>
</head>
<body>
<div>我是div标签</div>
<div>我也是</div>
<p>我是p标签</p>
<p>我也是</p>
<h1 class="aa">我是h1啊</h1>
<h2>我是h2啊</h2>
</body>
</html>
3.交集选择器
交集选择器：紧挨着
- 作用：选中页面中 同时满足 多个选择器的标签
- 选择器语法：选择器1选择器2 { css }
- 结果： （既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式
- 注意：
- 交集选择器中的选择器之间是紧挨着的，没有东西分隔
- 交集选择器中如果有标签选择器，标签选择器必须写在最前面
- 一个交集选择器只能选择一个标签
<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.red {
color:red;
}
</style>
</head>
<body>
<div class="red">小姐姐</div>
<p>小帅哥</p>
<p class="red">小可爱</p>
</body>
</html>
4.Emmet语法
-
作用：通过简写语法，快速生成代码
-
语法： 类似于选择器的写法
记忆 示例 效果 标签名 div <div></div>类选择器 .red <div class="red"></div>id选择器 #one <div id="one"></div>交集选择器 p.red#one <p class="red" id="one"></p>子代选择器 ul>li <ul><li></li></ul>内部文本 ul>li{我是内容} <ul><li>我是内容</li></ul>创建多个 ul>li*3 <ul><li></li><li></li><li></li></ul>数字排序 ul>li{$}*3 注：1个$代表一位数字，3个代表三位
5.hover伪类选择器
- 作用：选中鼠标悬停在元素上的状态，设置样式
- 选择器语法：
选择器:hover { css } - 注意：伪类选择器选中的元素的某种状态
二、背景相关属性
1.背景颜色
-
属性名：background-color（bgc）
-
属性值：
颜色取值：关键字、rgb表示法、rgba表示法、十六进制……
-
注意：
- 背景颜色默认值是透明： rgba(0,0,0,0) 、transparent
- 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
2.背景图片
- 属性名：background-image（bgi）
- 属性值：
background-image:url('图片的路径'); - 注意：
- 背景图片中url中可以省略引号
- 背景图片默认是在水平和垂直方向平铺的
- 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
<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 {
width: 400px;
height: 400px;
background-color: red;
background-image: url('./images/1.jpg');
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3.背景平铺
-
属性名：background-repeat（bgr）
-
取值 效果 repeat （默认值）水平和垂直方向都平铺 no-repeat 不平铺 repeat-x 沿水平方向（x轴）平铺 repeat-y 沿垂直方向（y轴）平铺
4.背景位置
- 属性名：background-position（bgp）
- 属性值：
background-position:水平方向位置 垂直方向位置;
- 注意：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
5.背景相关属性连写
- 属性名：background（bg）
- 属性值： 单个属性值的合写，取值之间以空格隔开
- 书写顺序： 推荐：background：color image repeat position
- 省略问题： 可以按照需求省略
- 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url( )
- 注意：
- 如果需要设置单独的样式和连写
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
- 如果需要设置单独的样式和连写
<style>
.box {
width:400px;
height:400px;
background:skyblue url('./images/1.jpg') no-repeat center center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
6.（拓展）img标签和背景图片的区别
- 需求：需要在网页中展示一张图片的效果？
- 方法一：直接写上img标签即可
- img标签是一个标签，不设置宽高默认会以原尺寸显示
- 方法二：div标签 + 背景图片
- 需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
三、元素显示模式
1.块级元素
- 属性：display：block
- 显示特点：
- 独占一行（一行只能显示一个）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
- 代表标签：
- div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…
2.行内元素
- 属性：display：inline
- 显示特点：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
- 代表标签：
- a、span 、b、u、i、s、strong、ins、em、del…
3.行内块元素
- 属性：display：inline-block
- 显示特点：
- 一行可以显示多个
- 可以设置宽高
- 代表标签：
- input、textarea、button、select……
- 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
4.元素显示模式转换
-
目的：改变元素默认的显示特点，让元素符合布局要求
-
语法：
属性 效果 使用频率 display:block 转换成块级元素 较多 display:inline-block 转换成行内块元素 较多 display:inline 转换成行内元素 极少
5.拓展1：HTML嵌套规范注意点
- 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……
- 但是：p标签中不要嵌套div、p、h等块级元素
- a标签内部可以嵌套任意元素
- 但是：a标签不能嵌套a标签
6.拓展2：居中方法总结
四、CSS三大特性
1.继承性
-
特性：子元素有默认继承父元素样式的特点（子承父业）
-
可以继承的常见属性：
- color
- font-style、font-weight、font-size、font-family
- text-indent、text-align
- line-height
-
注意：可以通过调试工具判断样式是否可以继承
- （拓展）继承的应用
- 好处：可以在一定程度上减少代码
- 常见应用场景：
- 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
- 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
- （拓展）继承失效的特殊情况
- 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
- a标签的color会继承失效
- 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
- h系列标签的font-size会继承失效
- 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
- div的高度不能继承，但是宽度有类似于继承的效果
- 宽度属性不能继承，但是div有独占一行的特性
2.层叠性
- 特性：
- 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
- 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生
- 注意点：
- 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
但是优先显示浏览器的默认样式
- a标签的color会继承失效
- 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
- h系列标签的font-size会继承失效
- 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
- div的高度不能继承，但是宽度有类似于继承的效果
- 宽度属性不能继承，但是div有独占一行的特性
2.层叠性
- 特性：
- 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
- 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生
- 注意点：
- 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
扫一扫
2039
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
