- 样式的三种方式:
- 内联样式
<div style="width:100px;height:100px;color: red">123456</div>
- 内部样式
<style>
p{
color: green;
}
</style>
<p>1234567890</p>
- 外部样式
<link rel="stylesheet" href="./index.css">
- 选择器:
- id选择器 #id名{}
- class选择器 .class名{}
- 标签选择器 标签名{}
- 子代选择器 A>B
- 后代选择器 A空B
- 伪类选择器 a:hover{}一般是鼠标划入时有变化
- 分组选择器 A,B{}
- 选择器的优先级:
- !important 1000000(一般情况下不建议使用,破坏代码的稳定)
- 内联1000
- id 100
- class 伪类 10
- 标签 伪元素 1
- 同一个元素的相同属性优先级:id > class > 标签
- 同一个元素,不同选择器里的不同属性会合并
- 同一个元素,选择器的优先级相同时 同一个属性 后面的会把前面的覆盖