CSS（复合选择器，元素显示模式，背景）

CSS的复合选择器

复合选择器
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器上，对基本选择器进行组合而成的。

• 常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等等

1. 后代选择器
   要把 ol 里面的li 选出来
   ol li{
   color:red;
   }
   后代选择器，可以选择父元素里面子元素，写法： 把外层标签写在前面，内层标签写在后面，中间用空格分隔。

语法：
元素1 元素2{样式声明}

元素1和元素2中间用空格隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可

2.子选择器
只能选择作为某元素的最近一级子元素，简单理解就是亲儿子元素

语法：
元素1>元素2{样式声明}
div>p{样式声明}/*选择div里面所有最近一级p标签元素*/

元素1和元素2中间用大于号隔开
元素1是父级，元素2是子级，最终选择是元素2
元素2必须是亲儿子，其孙子，重孙之类都不归他管。

并集选择器

语法：
元素1，元素2{样式声明}
ul,div{样式声明}/*选择ul和div标签元素*/

元素1和元素2中间用逗号隔开
逗号可以理解为和的意思
并集选择器常用于集体声明

div,
p,
.pig li{
color: pink;
}

伪类选择器
用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写的最大的特点是用冒号（：）表示，比如：hover、：first-child。

链接伪类选择器
a：link 选择所有未被访问的链接
a：visited选择所有已被访问的链接
a：hover选择鼠标指针位于其上的链接
a：active选择活动链接（鼠标按下未弹起的链接）
注意事项：
1.为了确保生效，请按照lvha的循顺序声明：link、：visited、：hover、：active
2.记忆法：love hate或者 lv包包hao
3.因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

a{
	color:gray;
}
a:hover{
	color:red;/*鼠标经过的时候，由原来的 灰色 变成了 红色 */
}

:focus伪类选择器
用于选取获得焦点的表单元素。
焦点就是光标，一般情况input类表单元素才能获取，因此这个选择器也主要对于表单元素来说。

input：focus{
background-color:yellow;
}

CSS的元素显示模式

可以更好的布局我们的网页
元素显示模式就是元素（标签）以什么方式进行显示，比如div自己占一行，一行可以放多个span
HTML元素一般分为块元素和行内元素两种类型。

块元素
h1-h6，p，div，ul，ol，li
特点：独占一行，高宽外边距，内边距可控制，宽度默认容器的100%，是一个容器及盒子，里面可以放行内或者块级元素
⚠️：文字类的元素内不能使用块级元素
⚠️：p主要用于存放文字，因此p里面不能放块级元素，特别是div
⚠️：h1-h6也不能放其他块级元素

行内元素
常见行内元素a，strong，b，em，i，del，s，ins，u，span等，其中span标签是最典型的行内元素，有的地方也将行内元素称为内联元素。
特点：
一行可显示多个，高宽直接设置是无效的，默认宽度是它本身内容的宽度，行内元素只能容纳文本或其他行内元素。
⚠️：链接里面不能再放链接
⚠️：特殊情况链接a里面可以放块级元素，但是给a转化一下块级模式最安全。

行内块元素
img，input，td 同时具有块元素和行内元素的特点。
特点：
一行可显示多个，默认宽度是它本身内容的宽度，高度，行高，外边距以及内边距都可以控制。

元素显示模式转换
转换为行元素：display：block；
转换为行内元素：display：inline；
转换为行内块：display：inline-block；

小工具：snipaste

单行文字垂直居中
解决方法：让文字的行高等于盒子的高度

CSS的背景

背景颜色background-color
定义元素的背景颜色
默认值是transparent（透明）

背景图片background-image
描述了元素的背景图像，优点是非常便于控制位置。

div{
	width:300px;
	height:300px;
	background-image:url(images/logo.png);
}

背景平铺background-repeat
属性值：
repeat：背景图像在纵向和横向上平铺（默认的）
no-repeat：背景图像不平铺
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺

背景图片的位置background-position：x y
参数代表意思：x坐标和y坐标，可以使用方位名词或者精确单位
length：百分数，由浮点数子和单位标识符组成的长度值
position：top|center|botton|left|right 方位名词

参数是方位名词
1⃣️如果指定的两个值都是方位名词，则两个值前后顺序无关，left top 与top left 效果一致
2⃣️如果指定了一个方位名词，另一个则省略，则第二个值默认居中对齐
参数是精确单位
1⃣️如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
2⃣️如果指定一个数值，那则数值一定是x坐标，另一个默认垂直居中

参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

背景图像固定（背景附着）
background-attachment：scroll|fixed
scroll：背景图像是随对象内容滚动
fixed：背景图像固定

背景复合写法
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置。
⬆️没有特定的书写习惯
backgroud：transparent url（image.jpg） repeat-y fixed top；

背景色半透明
background：rgba（0，0，0，0 .3）删除线上的0keyishenglve
最后一个参数，取值范围为0-1