css
样式来源
- 默认样式
- 行内样式 style=””
- 文档样式 <style></style>
- 外部样式 style.css
选择器
基本选择器
- [属性]
- # id
- . class
- * 通配符
上下文选择器
- > 子元素 只选择一代
- 空格 所有后代
- + 相邻兄弟
- ~ 所有兄弟
css权重
- 最高级:!important
- 第一等:内链style=””
- 第二等:ID选择器 #h3
- 第三等:类选择器 .h3
- 第四等:空格选择器 div h3
- 通配符:子选择器、相邻选择器等
案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title><!-- 第三按文件和style顺序从下往上 --> <link rel="stylesheet" href="css.css"><style>*{ font-size:45px; font-weight:bolder;}/* 子元素 只选择一代 */.div2>div>span{ color:#159454;}/* 空格 所有后代 */.div3>div span{ color:#8b9415;}/* 相邻兄弟 */.div4>div+ul{ color:#849229;}/* 所有兄弟 ~ */.div5>div~ul{ color:#359229;}/* 最高级:!important第一等:内链style=""第二等:ID选择器 #h3第三等:类选择器 .h3第四等:空格选择器 div h3通配符:子选择器、相邻选择器等*/div h3.h3#h3{ color:#123456;}div h3.h3{ color:#234567;}div h3{ color:#345678;}h3{ color:#456789;}/* 优先执行!important */.div{ color:#4a498f !important;}</style></head><body><div style="display: flex;" ><div style="width:50%;" > <!-- 第二执行style --> <div class="div" style="color:red;">123</div> <div class="div2" > <div> <span>11</span> </div> <div> <div> <span>22</span> </div> </div> </div> <div class="div3" > <div> <span>11</span> </div> <div> <div> <span>22</span> </div> </div> </div> <div class="div4" > <div> <span>11</span> </div> <ul> <li>222</li> </ul> <ul> <li>333</li> </ul> </div> <div class="div5" > <div> <span>11</span> </div> <ul> <li>222</li> </ul> <ul> <li>333</li> </ul> </div></div><div style="width:50%;" ><!-- 权重 --><h3 class="h3" id="h3" >123</h3></div></div></body></html>
