Xnip2022-08-09_14-28-25.jpg
1.复合选择器
1.后代选择器，儿子，孙子，重孙子。选择器空格隔开就可以
div p {
2.> 只选儿子，子代选择器。
.div2>a
3.并集选择器 ,逗号隔开。
4.交集选择器 直接挨着就可以。p.a p#a
5.hover 伪类选择器 任何元素都可以添加hover 伪类。
鼠标停在上面，hover伪类选择器。
a:hover
div:hover
2.emmet语法
VSCode有一个emmet语法。
3.背景色 背景图片 背景平铺 背景位置 背景相关属性连写
背景颜色 :background-color:gray;
background-color: rgba(255, 0, 0, 0.3);
背景图片:background-image
如果是小图，默认会平铺
背景图的平铺 ：background-repeat 沿着x轴或者y轴来平铺。
背景位置：
background-position 50px 100px;
center center, left top bottom.
连写：复合属性。
/* background: color image repeat position复合使用 */
background: red url(./img.png) no-repeat right bottom;
img和背景图的区别：
背景图：依赖一个标签来展示的，必须要有宽高。
Img插入图，比较重要的图片，
装饰的用background-image,
4.元素显示模式
标签/元素/标记
块 div p
我是块
行内：
行内块
5.元素显示模式
标签的转换：
display:block 转换为块级元素。使用频率较多。
display:inline-block 转换为行内块元素，使用频率较多
display：转换为行内元素。 使用频率较少
6.标签嵌套
1. p标签不能嵌套p div h标签 2.a标签可以嵌套任何标签，但是a标签不能嵌套a标签。
7.继承性
给父亲加标签，他的所有子标签都会有这个属性。节省代码。
文字的控制属性都可以继承：color font-style font-weight font-size font-family
text-indent
text-align
line-height
8.层叠性，
后面的会覆盖前面的。
9.demo
截屏2022-08-09 14.50.12.png
Document