CSS基础篇---02选择器进阶、背景样式、显示模式
CSDN话题挑战赛第2期
参赛话题：学习笔记
文章目录
1.选择器进阶
后代选择器
子代选择器
并集选择器
交集选择器
伪类选择器
案例演示
2.背景样式
背景颜色
背景图片
背景平铺
背景位置
案例演示
3.显示模式
块级元素
行内元素
行内块元素
元素显示模式转换
案例演示
1.选择器进阶
我们学习了基本的选择器，都是单个选择器，那么是否有更复杂的呢，答案是有的，下面就介绍几个比较复杂的选择器。
后代选择器
后代选择器是指通过HTML嵌套关系，选择父元素后代中满足条件的元素。
选择器1 选择器2{css}在选择器1所找到标签的后代，找到满足选择器2的标签，设置样式。
注意点：
后代包括（儿子，孙子，重孙子......）而下面讲到的子代只包含子代。
子代选择器
后代选择器是指通过HTML嵌套关系，选择父元素子代中满足条件的元素。
选择器1>选择器2{css}并集选择器
并集选择器是指同时选择多组标签，设置相同的样式。
选择器1,选择器2{css}注意点：
并集选择器每组选择器可以是基础选择器也可以是复合选择器（指后代和子代）。
并集选择器通常一行写一个，提高代码可读性。
交集选择器
<span class="box">span标签：box</span>
<span>span标签</span>
<h3 class="box">h3标签：box</h3>上面一组代码我想选中第一行设置成红色怎么设置呢？这就需要用到交集选择器（可以理解成数学的交集）。
选择器1选择器2{css}注意点：
选择器直接没有东西隔开，是紧挨着的。
如果有标签选择器，标签选择器必须写在最前面。
伪类选择器
伪类选择器的作用是选中鼠标在元素上的状态，设置样式。
选择器：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>
/* 后代选择器 */
div p{
color: blue;
}
/* 子代选择器 */
div>a{
color: red;
}
/* 并集选择器 */
h1,
h2,
strong{
background-color:pink;
}
/* 交集选择器 */
span.box{
background-color: green;
}
/* 伪类选择器 */
h4:hover{
color:yellow;
background-color: skyblue;
}
</style>
</head>
<body>
<p>p标签</p>
<div>
<p>div里的p标签</p>
<a href="#">div里面的a</a>
<span>
<a href="#">div里面的span的a</a>
</span>
</div>
<h1>h1标签</h1>
<h2>h2标签</h2>
<strong>strong标签</strong>
<br>
<span class="box">span标签：box</span>
<span>span标签</span>
<h3 class="box">h3标签：box</h3>
<h4>h4标签使用伪类</h4>
</body>
</html>
最后一行为鼠标悬停时的效果。
2.背景样式
背景样式包括两个方面：背景颜色和背景图片。颜色都知道是color了那么其他几个呢。
背景颜色
background-color: 取值;背景颜色的取值我们用了关键字表示，其实还有其他几种表示方式：rgb表示法，rgba表示法，十六进制......
注意点：
rgba(0,0,0,0)表示（红，绿，蓝，透明度）。
背景颜色的默认值是透明色：rgba(0,0,0,0)，transparent。
背景颜色不会影响盒子大小，并且还能看清盒子大小和位置，一般先给盒子设置背景颜色。
背景图片
background-image: url(地址);背景平铺
background-repeat: 取值; 
背景位置
background-position: 水平方向位置 垂直方向位置;
案例演示
<!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>
/* 背景颜色 */
.bgc{
/* background-color: pink; */
background-color: rgba(200, 150, 150, 0.5);
width: 200px;
height: 200px;
margin: 0 auto;
}
.center{
text-align: center;
}
/* 背景图片 */
.bgi{
width: 250px;
height: 220px;
margin: 0 auto;
background-image: url(./img/circ.png);
}
/* 背景平铺 */
.bgr{
width: 250px;
height: 220px;
margin: 0 auto;
background-color: rgba(200, 150, 150, 0.5);
background-image: url(./img/circ.png);
background-repeat: no-repeat;
/* 背景位置 省略不写的默认为居中*/
background-position: top;
}
</style>
</head>
<body>
<div class="bgc">
<p class="center">div</p>
</div>
<br>
<div class="bgi"></div>
<br>
<div class="bgr"></div>
</body>
</html>
3.显示模式
我们学习的元素也不少了，那么他们的显示模式分别是怎样的呢，这里分为三种显示模式，也可以说是显示特点。
块级元素
特点:1.独占一行。 2.宽度默认是父元素的宽度，高度由内容撑开。 3.可以设置宽高。
如：div，p，h系列，ul，li，dl，dt......
行内元素
特点:1.一行可以显示多个。 2.宽度和高度默认由内容撑开。 3.不可以设置宽高。
如：a，spar，b，u，i，s，strong......
行内块元素
特点:1.一行可以显示多个。 2.可以设置宽高。
如：input，textare，button，selec......
元素显示模式转换
我想要div又能一行多个显示，又能设置宽高，怎么办呢？其实元素显示模式直接可以相互转换的。
案例演示
<!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>
.display{
width: 100px;
height: 100px;
background-color: skyblue;
}
.change{
width: 100px;
height: 100px;
background-color: skyblue;
/* display: block; */
display: inline-block;
}
</style>
</head>
<body>
<!-- 块级元素 -->
<div class="display">div</div>
<div class="display">div</div>
<!-- 行内元素 -->
<br>
<span class="display ">span</span>
<span class="display ">span</span>
<!-- 行内块元素 -->
<input type="text" class="display">
<input type="text" class="display">
<!-- 元素显示模式转换 -->
<span class="display change">span</span>
<span class="display change">span</span>
</body>
</html>