六、选择器进阶
6.1.1 选择器进阶- 后代选择器
后代选择器: 空格
作用：根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素
选择器语法：父集选择器 后代选择器 {css}
结果:
在父集选择器所找到标签的后代 (儿子、孙子、重孙子...),找到满足后代选择器的标签,设置样式
<style>
/* 找到div的儿子p设置文字颜色是红色 */
/* 父选择器 后代选择器 {} */
div p {
color: red;
}
</style>
</head>
<body>
<!-- 后代：儿子,孙子,重孙子... -->
<p>这是一个p标签</p>
<div>
<p>这是div的儿子</p>
</div>
</body>示例：
注意点：
- 后代包括：儿子、孙子、重孙子...
- 后代选择器中，选择器与选择器之前通过空格隔开
6.1.2 选择器进阶- 子代选择器
子代选择器：>
作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1 > 选择器2 {css}
结果：
在选择器1所找到标签子代(儿子)中,找到满足选择器2的标签,设置样式
<style>
/* 空格隔开的是后代选择器,会选中儿子，孙子，重孙子 */
div a{
color: red;
}
/* 只想选中儿子的a */
/* div的儿子a文字颜色是红色 */
div > a {
color: red;
}
</style>
</head>
<body>
/* <!-- 子代：儿子 --> */
<div>
<a href="#">这是div里面的a</a>
<p>
<a href="#">这是div里面的p里面的a</a>
</p>
</div>
</body>示例：
注意点：
- 子代之包含：儿子
- 子代选择器中,选择器与选择器之前通过 > 隔开
6.1.3 选择器进阶- 并集选择器
并集选择器：,
作用：同时选择多组标签,设置相同的样式
选择器语法：选择器1 , 选择器2 {css}
结果：
找到 选择器1 和 选择器2 选中的标签,设置样式
<style>
/* p div span h1 文字颜色是红色 */
/* 选择器1, 选择器2 {} */
p,
div,
span,
h1 {
color: red;
}
</style>
</head>
<body>
<p>ppp</p>
<div>div</div>
<span>span</span>
<h1>h1</h1>
</body>示例：
注意点：
- 并集选择器中的每组选择器之间通过,分隔
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常一行写一个,提高代码的可读性
6.1.4 选择器进阶- 交集选择器
交集选择器：紧挨着
作用：选中页面中同时满足多个选择器的标签
选择器语法：选择器1选择器2 {css}
结果：
(即又原则) 找到页面中 既 能被选择器1选中, 又 能被选择器2选中的标签,设置样式
<title>Document</title>
<style>
/* 必须是p标签,而且添加了box类 */
p.box {
color: red;
}
</style>
</head>
<body>
<!-- 找到第一个p, 带box类的,设置文字颜色是红色-->
<p class="box">这是p标签：box</p>
<div class="box">这是div标签:box</div>
</body>示例：
注意点：
- 交集选择器中的选择器之间是紧挨着的,没有东西分隔
- 交集选择器中如果有标签选择器,标签选择器必须写在最前面
6.1.5 选择器进阶- 伪类选择器
伪类选择器: :hover
作用：选中鼠标悬停在元素上的状态, 设置样式
选择器语法：选择器:hover {css}
<style>
/* 悬停的时候文字颜色是红色*/
a:hover {
color: red;
background-color: green;
}
</style>示例：
注意点：
- 伪类选择器选中的元素的某种状态
6.1.6 选择器进阶- 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{我是li的内容} <ul><li>我是li的内容</li></ul>
创建多个 ul>li*3 <ul><li></li><li></li><li></li></ul>
div+同级 div+p <div></div><p></p>
div+父级 div>p <div><p></p></div>
<!-- ul里面有3个li,li里面有文字1,2,3
ul>li{$}*3
-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>七、背景相关属性
7.1.1 背景- 背景色
属性名：background-color (bgc)
属性值：
颜色取值：关键字、rgb表示法、rgba表示法、十六进制....
<style>
div {
width: 400px;
height: 400px;
/* background-color: pink; */
background-color: #ccc;
/* 红绿蓝三颜色,a是透明度0-1 */
/* 下面两种写透明度方法都可以 */
/* background-color: rgba(0,0,0,0.5); */
background-color: rgba(0,0,0,.5);
}
</style>注意点：
- 背景颜色默认值是透明：rgba(0,0,0,0)、transparent是全透明黑色(black)的速记法
- 背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色
7.1.2 背景- 背景图片
属性名：background-image(bgi)
属性值：background-image: url( '图片的路径' );
<style>
div {
width: 1152px;
height: 720px;
background-color: pink;
background-image: url(./images/1.jpeg);
}
</style>注意点：
- 背景图片中url中可以省略引号
- 背景图片默认是在水平和垂直方向平铺的
- 背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色, 是不能撑开盒子的
7.1.3 背景- 背景平铺
属性名：background-repeat (bgr)
属性值：
取值 效果
repeat (默认值) 水平和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿着水平方向 (x轴)平铺
repeat-y 沿着垂直方向 (y轴)平铺
<style>
div {
width: 1152px;
height: 720px;
background-color: pink;
background-image: url(./images/1.jpeg);
background-repeat:repeat; 默认值
/*不平铺: 图片只显示一个 工作中最常用 */
/* background-repeat:no-repeat; */
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
}
</style>7.1.4 背景- 背景位置
背景位置：background-postion (bgp)
属性值：background-position：水平方向位置 垂直方向位置;
取坐标系 正数: 向右向下移动; 负数向左向上移动
<style>
div {
width: 1152px;
height: 720px;
background-color: pink;
background-image: url(./images/1.jpeg);
background-repeat: no-repeat;
/* 第一种方法 */
/* background-position: right 0; */
/* background-position: right bottom; */
/* background-position: center center; */
/* background-position: center; 可以简略这样写 */
/* 第二种方法 */
/* background-position: 50px 0; */
/* background-position: 50px 100px; */
/* background-position: -50px 100px; */
background-position: -50px -100px;
/* 正数: 向右向下移动; 负数向左向上移动*/
/* 注意: 背景色和背景图只显示在盒子里面 */
}
</style>注意点：
- 方位名词取值和坐标取值可以混使用, 第一取值表示水平, 第二个取值表示垂直
- 背景色和背景图只显示在盒子里面
7.1.5 背景- 背景相关属性连写
背景复合属性连写：background (bg)
属性值：
单个属性值的合写，取值之间以空格隔开
书写顺序(可以不用顺序来写)：background：color image repeat position
省略问题：
可以按照需求省略
特殊情况：在pc端,如果盒子大小和背景图片大小一样,此时可以直接写 background: url()
<style>
div {
width: 1152px;
height: 720px;
/* 不分先后顺序 背景色 背景图 背景图平铺 背景图位置 */
/* background: pink url(./1.jpeg) no-repeat center bottom; */
/* 背景图位置如果是英文单词可以颠倒顺序 */
/* background: pink url(./1.jpeg) no-repeat bottom center; */
/* 测试背景图位置如果是数值 不要颠倒顺序 */
/* 水平50px, 垂直100px */
/* background: pink url(./1.jpeg) no-repeat 50px 100px; */
/* 水平100px, 垂直50px */
background: pink url(./1.jpeg) no-repeat 100px 50px;
}
</style>注意点：
- 如果需要设置单独的样式和连写
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
7.1.6 背景- img标签和背景图片的区别
img标签和背景图片的区别：
需求：需要在网页中展示一张图片的效果?
方法一：直接写上img标签即可
img标签是一个标签,不设置宽高默认会以原尺寸显示
方法二：div标签 + 背景图片
需要设置div的宽高,因为背景图片只是装饰的CSS样式,不能撑开div标签用途区别:
img是插入图,工作中实现比较重要的图片使用img
background是背景图，工作中比较不重要的使用背景图修饰作用
扫一扫
479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
