复合选择器
定义：由两个或多个基础选择器，通过不同的方式组合而成。
作用：更准确、更高效的选择目标元素（标签）。
1.后代选择器
用来选择某元素的后代的选择器
语法：
父级 子级（顺延写下来就可以了）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .father { background-color: beige; height: 200px; width: 200px; } .father p { color: blueviolet; } </style> <body> <div class="father"> <p>子元素</p> </div> </body> </html>
2.子代选择器
定义：选中某元素的子代元素
语法：父级 > 子级
<style> div > span { color: red; } </style> <div> <span>这是 div 里面的 span</span> <p> <span>这是 div 里面的 p 里面的 span</span> </p> </div>
3.并集选择器
并集选择器：选中多组标签设置相同的样式。
语法： 把需要应用样式的元素用逗号隔开
<style> div, p, span { color: red; } </style> <div> div 标签</div> <p>p 标签</p> <span>span 标签</span>
4.交集选择器
交集选择器：选出满足多个筛选条件的元素的选择器
如果交集选择器中有标签选择器，标签选择器必须书写在最前面。
<style> p.box { color: red; } </style> <p class="box">p 标签，使用了类选择器 box</p> <p>p 标签</p> <div class="box">div 标签，使用了类选择器 box</div>
5.伪类选择器
编辑
给样式应用上伪类选择器，则会在某些条件下启动样式，比如hover，当我们应用上这个伪类选择器，当光标移到元素上时，元素会启动样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .father:hover { background-color: rgb(244, 244, 22); height: 200px; width: 200px; } .father { background-color: blueviolet; height: 200px; width: 200px; } </style> <body> <div class="father"> <p>子元素</p> </div> </body> </html>
当我们把光标移到div上，div会从blueviolet颜色变成黄色。
编辑
CSS特性
1.继承性
继承性：子级默认继承父级的文字控制属性。
当我们给父级元素一个样式，如果它的后代元素没有特别地应用样式，那么它就会继承它父级的样式。
2.层叠性
相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
不同的属性会叠加：不同的 CSS 属性都生效
这个特性很有用，可以用于后期修改别人的控件的样式，也可以在不用找样式位置的情况下快速添加样式。
3.优先级
通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
背景属性
背景图：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .father { background-image: url(); } </style> <body> <div class="father"> <p>子元素</p> </div> </body> </html>
background-image:url()引入背景图片，但是我们很快就会发现如果图片太大，那么我们只能看到很小一部分，该怎么解决呢？
平铺
编辑
.image{ background: url(../../static/images/ai1.jpg) top center; background-size: cover; }
上述代码可以把背景图片平铺
背景定位
编辑
背景图缩放
background-size:cover/contain
● cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
● contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
背景图固定
background-attachment: fixed;
显示模式
display:block/inline/inline-block
编辑
block:
● 独占一行
● 宽度默认是父级的100%
● 添加宽高属性生效
inline-block:
● 一行可以显示多个
● 设置宽高属性生效
● 宽高尺寸也可以由内容撑开
inline:
● 一行可以显示多个
● 设置宽高属性不生效
● 宽高尺寸由内容撑开
