目录
一、复合选择器
1.后代选择器
作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法： 选择器父 选择器后代 { }
结果：
-
在选择器父所找到标签的后代中，找到满足选择器后代的标签
注意点：
-
后代包括：儿子、孙子、重孙子........
-
后代选择器中选择器父和选择器后代之间通过空格隔开
-
若找不到父选择器，自然后代也找不到 （因此在父多的时候，一定要看仔细了，如果实在不行就debug）
<style>
div p {
color: red;//div里面的所有p标签都被渲染
}
</style>
<p>哈哈哈</p>
<div>
<p>嘎嘎嘎
<p>顶顶顶顶 </p>
</p>
</div>
//若删除div标签，则都不被渲染2.子代选择器
作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法： 选择器父 > 选择器子 { }
结果：
-
在选择器父所找到标签的儿子中，找到满足选择器子的标签
注意：
-
子，是指儿子只代表第一代儿子
-
子代选择器中，选择器父和选择器子通过 > 隔开
-
若找不到父选择器，自然子代选择器也找不到
<style>
div > p{
color: red;//div标签里面的子p标签被渲染
}
</style>
<p>哈哈哈</p>
<div>
<p>嘎嘎嘎
<p>顶顶顶顶 </p>
</p>
</div>
//若删除div标签，则都不被渲染二、并集选择器
作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1 , 选择器2 { }
结果：
-
找到 选择器1 和 选择器2 选中的标签，设置样式
注意：
-
并集选择器中的每组选择器之间通过 , 隔开
-
并集选择器中的每组选择器可以是 基础选择器 或 复合选择器
-
并集选择器中的每组选择器通常一行写一个，提高代码可读性
<style>
a,
span,
div > p{
color: red;//以上3组选择器选中的标签都被修饰
}
</style>
<p>哈哈哈</p>
<div>
<p>嘎嘎嘎
<p>顶顶顶顶 </p>
</p>
</div>
<a>点击我</a>
<span>得瑟得瑟</span>三、交集选择器
作用：选中页面中 同时满足 多个选择器的标签
选择器语法：选择器1选择器2 { }
结果：
-
（既又原则）找到页面中 既 能被选择器1选中，又能被选择器2选中的标签，设置样式
注意：
-
交集选择器中的选择器之间是紧挨着的，没有东西分隔
-
交集选择器中如果有标签选择器，则标签选择器写在最前面
温馨提示：开发中常用于类名相同且在同一个父里面的情况
<style>
p.box
</style>
<div>
<p class="box">这是'p'</p>
<div class="box">这是'div' </div>
</div>
四、hover伪类选择器
作用：选中鼠标 悬停 在标签上的标签
选择器语法： 选择器：hover {css}
注意：
-
伪类选择器选中的元素的某种状态
<style>
p:hover{
color: red;//当鼠标悬停在p标签上面时，字体颜色变为红色
}
</style>
<p>悬停选择器</p>五、VScode的Emmet语法
作用：通过简写语法，快速生成代码
语法：
-
标签选择器: div == > <div></div>
-
类选择器： .red ==> <div class="red"></div>
-
id选择器： #one ==> <div id="one"></div>
-
交集选择器： p.red#one ==> <div class="red" id="one"></div>
-
子代选择器： ul>li ==> <ul> <li></li> </ul>
-
创建多个： ul>li*2 ==> <ul> <li></li><li></li></ul>
-
内容文本： ul>li{li的内容} ==> <ul> <li>li的内容</li> </ul>
-
css属性: 例如 fw ==> font-weight： 以此类推.....
-
css快速: 例如 w200+h100 ==> width: 200,height: 100
-
以此类推.....
六、CSS属性：背景相关
1.背景颜色
属性名：background-color
属性值：
1.颜色单词
2.rgb( , , ) 、 rbga( , , , )
3. #16进制数
<style>
div{
background-color: red;
background-color: rgb(1,2,3);
background-color: rgb(1,2,3,0.2);
background-color: #ccc;
}
</style>
<div>背景学习</div>2.背景图片
属性名：background-image
属性值：url('图片的路径')
<style>
div{
background-image: url('1.jgp');
}
</style>
<div>背景学习</div>3.背景平铺
用于盒子比背景图片大时，图片该如何填充盒子的方式
属性名：background-repeat
属性值：
repeat 默认值，水平和垂直方向都平铺
no-repeat 不平铺，最常用
repeat-x 沿着水平（x轴）方向平铺
repeat-y 沿着竖直（y轴）方向平铺
<style>
div{
background-image: url('1.jgp')//盒子300x300，图片100x100,默认垂直和水平平铺了
background-repeat: no-repeat;//不平铺盒子
background-repeat: repeat-x;//水平平铺
background-repeat: repeat-y;//竖直平铺
}
</style>
<div>背景学习</div>4.背景位置
由于图片插入背景图片且不平铺的情况下，默认为左上角，因此需要改动位置
属性名：background-position
属性值： 水平方向位置 垂直方向位置
1.单词方位
水平方向:left，center，right
垂直方向：top，center，bottom
2.数字+px (坐标)
以左上角为圆点(0.0)
x，y坐标
注意：
-
方位和坐标可以混用&且超出了盒子的位置不显示&单词方位可以不按顺序来，数字坐标一定要按顺序
<style>
div{
background-image: url('1.jgp');
background-repeat: no-repeat;
background-position: center center;
background-position: 12px 12px;
background-position: 10px bottom;
background-position: left 10px;
}
</style>
<div>背景学习</div>5.复合属性
属性名：background
属性值：由这些组合color，image，repeat，position
<style>
div{
background: red url('1.jpg') no-repeat right bottom;
}
</style>
<div>背景学习</div>6.img标签和background-image属性的区别
background-image属性作为背景图片，受到盒子限制，不覆盖
img标签作为图片，不受任何盒子限制，会覆盖
两个不是一个级别的,按照重要级： img标签 > background-image属性
七、元素显示模式
学习元素显示模式的作用：用于网页排版
1.块级元素
显示特点：
1.独占一行(一行只能显示一个)
2.宽度默认是父元素的宽度
3.高度默认由内容撑开
4.可以设置宽度和高度
代表标签：
-
div、h系列、p、ul、li、ol、li、dl、dt、form、header、nav、footer....
2.行内元素
显示特点：
1.一行可以显示多个,不独占一行
2.宽度和高度默认由内容撑开
3.不可以设置宽度和高度
代表标签：
-
span、a、b、u、i、s、strong、ins、em、del......
3.行内块
显示特点：
1.一行可以显示多个,不独占一行
2.宽度和高度默认由内容撑开
3.也可以设置宽度和高度
代表标签：
-
input、textarea、button、select......
-
特殊情况：img标签有行内块元素特点，但是Chrome调试器调试工具中显示结果是inline
4.元素显示模式转换
目的：改变元素默认显示模式，让元素符合布局要求
属性：display
属性值：
block 转换成块级元素（常用）
inline 转换成行内元素（少用）
inline-block 转换成行内块元素（常用）
<style>
div{
display: inline; //将块模式转换为行内模式
}
span{
display: inline-block; //将行内模式转换为行内块模式
}
input{
display: block; //将行内块模式转换为块模式
}
</style>
<div></div>
<span></span>
<input type="text"></input>八、拓展：HTML标签嵌套规范
规则：
一般将块级元素作为大容器，来嵌套：文本、块级元素、行内元素、行内块元素....
注意事项：
p标签不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素，但是a标签不能嵌套a标签
九、CSS三大特性
1.继承性
特性：子标签有默认继承父标签样式的特点（子承父业）
常见可以继承的属性（一般是控制文字和文本的属性）
1.color
2.font家族
3.text-indent、text-align
4.line-height
5......
注意：
-
可以通过调试工具来判断样式是否可以继承
-
如果标签有浏览器赋予的样式，此时继承仍然存在，但是会失效，例如a标签浏览器赋予蓝色字体（color失效），h系列标签浏览器赋予字体大小（font-size失效)-----优先级的关系
说白了就是 浏览器赋予的>父继承的
<style>
div{
color: red; //hhh和ggg都变成红色，span标签文字内容颜色被继承
}
</style>
<div>
hhh
<span>ggg<span>
</div>2.层叠性
特性：
1.给同一个标签设置 不同 的样式，此时样式会层层叠加，共同作用在同一标签上
2.给同一个标签设置 相同 的样式，此时样式会覆盖，写在后面的覆盖前面的
注意：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果，也就是说层叠性用于同一级别选择器选中的发生层叠，不同级别的选择器按照高级别选择器为主
<style>
div{
color: red;
font-size: 12px;
}
div{
color: blue; //覆盖red
font-weight: 700; //叠加
}
</style>
<div>
大大
<div>
3.优先性（重点）
特性：不同类型选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式：
-
继承<通配符<标签<类<id<行内式
温馨提示：不需要死记优先级，按照选中的精准度判断即可，越精准的优先级越高
知识补充： !important
!important属性值具有提高该属性的优先级，可以将其提高至最高优先级
!important写在属性值的后面，分号的前面，例如color: purple !important;
!important不能提升继承的优先级，只要是继承优先级就是最低
实际开发中不建议使用!important
<style>
</style>
#study{
color: red;
}
.stu{
color: blue;
}
div{
color: purple !important;//加了!important字体变成紫色
}
*{
color: green;
}
body{
color: yellow;
}
<body>
<div class="stu" id="study" style="color:black;">优先级的学习</div>
</body>权重叠加计算
我们知道，前面我们只学习了基本选择器的优先级，还没学习多个选择器的优先级，多个选择器的优先级通过权重叠加计算来判断
场景：如果是多个选择器，此时需要通过权重叠加计算方法，判断哪个复合选择器会生效
权重叠加公式：（每一级之间不存在进位）
（ 0 ， 0 ， 0 ， 0 ）
行内式个数 id选择器个数 类选择器个数 标签选择器个数
比较规则：
先比较第一级数字，如果比较出来了，之后统统不要看，以此类推第二个、第三个、第四个数字
温馨提示：!important如果不是继承，则权重最高，天下第一，也不用去使用权重计算了
<style>
//(0,1,0,1) 第一
div #one{
color: orange;
}
//(0,0,2,0) 第二
.father .son{
color: skyblue;
}
//(0,0,1,1) 第三
.father p{
color: purple;
}
//(0,0,0,2) 第四
div p{
color: pink;
}
</style>
<div class="father">
<p class="son" id="one">权重叠加学习</p>
</div>练习题1
<style>
//(0,2,0,0) 第一
#father #son{
color: blue;
}
//(0,1,1,1) 第二
#father p.c2{
color: black;
}
//(0,0,2,2) 第三
div.c1 p.c2{
color: red;
}
//这是继承最低,!important也不生效
#father{
color: green !important;
}
//这是继承最低
div#father.c1{
color: yellow;
}
</style>
<div id="father" class="c1">
<p id="son" class="c2">权重叠加练习1</p>
</div>练习题2
<style>
//(0,0,0,2) //第一
div div{
color: skyblue;
}
//(0,0,0,1) //第二
div{
color: red;
}
<style>
<div>
<div>
<div>
权重叠加练习2
</div>
</div>
</div>练习题3
<style>
//(0,0,0,3) //第二
div div div{
color: red;
}
//(0,0,1,0) //第一
.one{
color: pink;
}
<style>
<div>
<div>
<div class="one">
权重叠加练习3
</div>
</div>
</div>练习题4
<style>
//(0.0,2,1) 第三
.c1 .c2 div{
color: blue;
}
//(0,1,0,1) 优先级一样则为层叠性，第二
div #box3{
color: green;
}
//(0,1,0,1) 优先级一样则为层叠性，第一
#box1 div{
color: yellow;
}
</style>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
权重叠加练习4
</div>
</div>
</div>练习题5
<style>
//继承最低，离span第一亲。按第一亲的来
div p {
color: red;
}
//继承最低,离span第二亲
.father {
color: blue;
}
</style>
<div class="father">
<p class="son">
<span>权重叠加练习5</span>
</p>
</div>十、谷歌排错方法
开发中，如果写css代码的时候，需要修饰的地方没有效果，则使用谷歌调试工具去选中你要修饰的的地方，看看css样式有没有问题，然后再对应去解决问题
温馨提示：出现红色下划线一般是语法有错误