选择器组合实现优先级提权
1.当选择器相同里，与书写顺序有关，后面的样式覆盖前面的
2.当选择器不同时，与优先级相关，级别高的覆盖级别低的
- 选择器优先级总结：ID > class > tag
- 组合选择器优先级别计算公式：【id 选择器的数量，class 选择器的数量，tag 选择器数量】
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>选择器组合优先级提权</title><style>p {color: red;}/*同选择器，后面声明的样式会覆盖前面的样式 */p {color: blue;}body p {/*此处的优先级别要大于单p标签选择器，计算公式：【id选择器的数量，class选择器的数量，tag选择器数量】此处权重 【0 0 2】*/color: red;}.class {/*类选择器权重大于tag选择器 */color: violet;}#id {/*id选择器权重大于类选择器*/color: tomato;}/*优先级总结：ID > class > tag*/p#id {/*此处权重【1 0 1】*/color: yellowgreen;}body p#id {/*此处权重【1 0 2】*/color: rgb(115, 22, 238);}#id.class {/*此处权重【1 1 0】*/color: rgb(235, 204, 28);}p#id.class {/*此处权重【1 1 1】*/color: rgb(0, 255, 128);}#id.class.class1 {/*此处权重【1 2 0】*//*class选择器可以叠加权重，ID不能叠加树德*/color: rgb(255, 166, 0);}</style></head><body><p class="class class1" id="id">选择器组合方式不同优先级也不同</p></body></html>
字体与字体图标
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>字体与字体图标</title><style>.font {/*字体设置，如果不知道用什么字体就用通用字体*/font-family: sans-serif;/*字体大小*/font-size: 12px;/*风格 正常文本用normal 斜体用italic*/font-style: italic;/*字体的粗细 */font-weight: 900;/*以上都可以简写*/font: italic sans-serif 12px 900;}.iconfont.icon-wancheng {color: rgb(71, 135, 255);}</style><!--导入阿里图标库CSS--><linkrel="stylesheet"href="https://at.alicdn.com/t/font_2275051_i6cvmpxveol.css"/></head><body><p class="font">字体与字体图标</p><hr /><p>字体图标，可以用阿里在线图标</p><form atcion="#" method="GET"><label for="dizhi" class="iconfont icon-shouhuodizhi">收货地址:</label><input type="text" name="dizhi" id="dizhi" required /><button class="iconfont icon-wancheng">提交</button></form></body></html>
盒模型常用属性的缩写方案
- 边距缩写总结
当左右相等，而上下不相等，使用三值语法
当左右相等，上下也相等，使用二值语法
当四个方向全相等，使用单值语法
总结，当使用三值和二值时，只需要记住第二个值永远表示左右
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>盒模型的常用属性及简写</title><style>.box {background-color: tomato;width: 300px;height: 500px;}.box {/*边框border-top-style 上border-right-style 右border-bottom-style 下border-left-style 左*//*每个边框可以设置三个属性：宽度，样式，颜色 */border-top-style: solid;border-top-width: 10px;border-top-color: rgb(121, 104, 101);/*简写 */border-top: solid 5px red;/*再简写 4边样式宽度颜色相同的情况下*/border: solid 6px violet;}.box {/*内边距padding: 上右下左*/background-clip: content-box;padding: 1px 2px 3px 4px;/*当左右相等，上下不相等时*/padding: 12px 3px 4px;/*当左右相等，上下相等时*/padding: 18px 9px;/*当上下左右都相等时*/padding: 6px;}.box {/*margin-bottom 设置元素的下外边距。margin-left 设置元素的左外边距。margin-right 设置元素的右外边距。margin-top*//*外边距：控制多个盒子之间的排列间距4值，顺时针，上，右，下，左*/margin: 5px 6px 8px 4px;/*3值 左右相等，上下不相等 */margin: 5px 4px 4px;/*2值 左右相等，上下相等*/margin: 5px 10px;/*单值四个方向全相等*/margin: 8px;}</style></head><body><div class="box">我是一个盒子</div></body></html>