一、复合选择器
1、并集选择器
并集选择器（css选择器分组）是各个选择器通过**逗号**连接而成的，任何形式的选择器（包括标签选择器、class类选择器，id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con1 {
color: aqua;
}
.con2 {
color: blueviolet;
}
/* 要求：两个字都加粗，字体大小都是32px */
/* 采用并集选择器 用逗号隔开 */
.con1,
.con2 {
font-weight: 700;
font-size: 32px;
}
</style>
</head>
<body>
<div class="con1">一</div>
<span class="con2">二</span>
</body>
</html>2、后代选择器
后代选择器又称为包含选择器。
其写法就是把外层标签写在前面，内层标签写在后面，中间用**空格**分隔，先写爷爷父亲，在写儿子孙子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 后代选择器 用来选择元素或者元素组的子孙后代做精准选择
中间用空格隔开 */
/* 要求：仅对胡桃添加颜色 */
ul li div span {
color: aqua;
}
</style>
</head>
<body>
<ul>
<li>
<div>
<span>胡桃</span>
</div>
</li>
<li>
<span>沈妙</span>
</li>
</ul>
</body>
</html>3、子元素选择器
子元素选择器只能选择作为某元素子元素的元素。
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 `>` 进行连接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 子代选择器 用大于号隔开*/
/* 要求：仅对沈妙添加颜色 */
ul li>span {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>
<div>
<span>胡桃</span>
</div>
</li>
<li>
<span>沈妙</span>
</li>
</ul>
</body>
</html>#对上述选择器加以练习：
要求：在不修改以下代码的前提下，完成以下任务：
1. 主导航栏和侧导航栏里面文字都是18像素并且是微软雅黑。
2. 链接登录的颜色为红色。
3. 主导航栏里的列表中的文字颜色为深灰色。
4. 收藏本站要求字体加粗。
代码如下：
```html
<!-- 主导航栏 -->
<div class="nav">
<ul>
<li>
<a href="">公司首页</a>
</li>
<li>
<a href="">公司简介</a>
</li>
<li>
<a href="">公司产品</a>
</li>
<li>
<a href="">联系我们</a>
</li>
</ul>
<em> 收藏本站 </em>
<div> 联系我们:
<em> 1234567890</em>
</div>
</div>
<!-- 侧导航栏 -->
<div class="sidebar">
<div class="sidebarLeft">左侧导航栏</div>
<div class="sidebarRight"><a href="#">登录</a></div>
</div>
```
结果如图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
font-size: 18px;
font-family: 微软雅黑;
}
.sidebarRight>a {
color: red;
}
div ul li a {
color: #ccc;
}
.nav>em {
font-weight: 700;
}
</style>
</head>
<body>
<!-- 主导航栏 -->
<div class="nav">
<ul>
<li>
<a href="">公司首页</a>
</li>
<li>
<a href="">公司简介</a>
</li>
<li>
<a href="">公司产品</a>
</li>
<li>
<a href="">联系我们</a>
</li>
</ul>
<em> 收藏本站 </em>
<div> 联系我们:
<em> 1234567890</em>
</div>
</div>
<!-- 侧导航栏 -->
<div class="sidebar">
<div class="sidebarLeft">左侧导航栏</div>
<div class="sidebarRight"><a href="">登录</a></div>
</div>
</body>
</html>二、标签的选择模式
1、常见标签及模式分类
常见标签： p div span ul li ol dt dd a input button img hr br em b strong i u ins s del h1~h6
（1） 块级元素
特点：1.独占一整行 2.可以设置宽和高
常见的有： p div h1~h6 li ul ol hr
（2） 行内元素
特点：不独占一行，不可以设置宽和高，宽高由内容撑开
常见的有：span a b strong i em u ins s del
（3）行内块元素
特点：不独占一行 可以设置宽高
常见的有：img input button
2、显示模式的转换
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
/* 显示模式转换 */
display: inline-block;
}
span {
display: block;
width: 200px;
height: 200px;
background-color: red;
}
img {
display: inline;
}
</style>
</head>
<body>
<!-- 块级 block -->
<!-- 行内 inline -->
<!-- 行内块 inline-block -->
<div>内容1</div>
<div>内容2</div>
<span>行内元素</span>
<!-- 标签的嵌套关系 -->
<!-- 块级元素内可以放任何元素 -->
<!-- 行内元素只能放文本或者其他行内元素 -->
<!-- 错误展示：
<p>段落一
<p>段落二</p>
</p> -->
<a href=""><img src="" alt=""></a>
</body>
</html>三、背景
1、背景样式
背景颜色：background-color
/* 下面3种写法是等价的 */
background-color: red;
background-color: rgb(255, 0, 0);
background-color: #ff0000;
背景图片：background-image
#与img插入图片一样写路径
background-image: url("./logo.jpg");
背景重复：background-repeat
/* repeat 默认值，默认情况下，在水平和垂直方向上都重复*/
background-repeat: 默认。背景图像将在垂直方向和水平方向重复。
background-repeat: repeat-x; 背景图像将在水平方向重复。
background-repeat: repeat-y; 背景图像将在垂直方向重复。
background-repeat: no-repeat; 背景图像将仅显示一次。不重复
背景定位：background-position
/*
水平：left center right
垂直：top center bottom
*/
background-position: 40px 40px;（水平位置、垂直位置）
background-position: 20% 20%;
background-position: right bottom;
注意图片移动方向：
background-position: 40px 40px;（水平向右、垂直向下）
background-position:-40px -40px;（水平向左、垂直向上）
2、精灵图
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。
这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。
我们需要使用CSS
- background-image
- background-repeat
- background-position属性进行背景定位，
- 其中最关键的是使用background-position 属性精确地定位。
> 注意:
> css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。
> 1. 精确测量，每个小背景图片的大小和 位置。
> 2. 给盒子指定小背景图片时， 背景定位基本都是负值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* 1.使用选择选择工具直接框大小 得到需要图片的大小然后设置盒子宽高*/
width: 25px;
height: 25px;
/* 背景图片 */
background-image: url(img/wangzhe.webp);
/* 背景定位 */
/* 2.使用工具从左上角拉框看宽高 得到需要图片的位置，然后对图片进行定位*/
background-position: 0px -105px;
/* 取消背景重复 */
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
