前言
css就像女人的化妆品一样，化妆前后
对于web 前端来说，书写好css是不容易的一件事情。下面就让我把工作中遇到问题分享给大家。
css优先级
先看下图
优先级
选择器的优先权解释说明
内联样式表的权值最高 1000。
ID 选择器的权值为 100。
Class 类选择器的权值为 10。
HTML 标签（类型）选择器的权值为 1。
!important权重最高 （注意）
例：
//css#slides{ ???color: #8A2BE2;/*权重值100*/}.slides{ ???color: #000000;/*权重值10*/}div{ ???color: #F2F2F2;/*权重值1*/}//HTML<div class="slides" id="slides" style="color: red;/*权重值1000*/"> ???slides</div>//jssetTimeout(function(){ ???var d=document.getElementById(‘slides‘); ???d.style.color=‘blue‘;},500);//js改变的样式是属于 内联样式。多重样式
比如页面有【内部样式】、【外联样式】权重相同则【内部样式】优先；
例：
<link rel="stylesheet" href="css/dome.css" /><style type="text/css">#slides{ ???color: #8A2BE2;/*权重值100*/}</style>
注：
- 如果两个【外联样式】同时含有相同权重class类名,则后者权重优先。
- 如果两个【内部样式】同时含有相同权重class类名,则后者权重优先。
猜猜渲染结果是什么？
例1：
//css.bg{ ???background-color: #8A2BE2;}.slides{ ???background-color: #000000;}//html<div class="slides bg"> ???slides</div>//渲染结果背景颜色是 bg 还是 slides？//html<div class=" bg slides"> ???slides</div>//问：渲染结果背景颜色是 bg 还是 slides？例2：
//css.bg{ ???background-image: url(img/1.png);}.slides{ ???background-color: #000000;}//html<div class="slides"> ???slides</div>//问：（HTML内没有使用 bg ?class类名）图片1.png会不会下载？例3：
//css--内部样式.slides{ ???background-color: #000000;}//html<div class="slides"> ???slides</div>//jssetTimeout(function(){ ???var dom=document, ???head = dom.getElementsByTagName(‘head‘)[0], ???link = dom.createElement(‘link‘); ???link.href = ‘css/dome.css‘; ???link.rel = ‘stylesheet‘; ???link.type = ‘text/css‘; ???head.appendChild(link); /*添加到HTML中*/},500)//‘css/dome.css‘的内容为.slides{ ???background-color: red;}//问：slides的背景颜色是什么？例4：
问：css加载会不会影响dom解析？
Da 案
例1：slides ?slides ?渲染样式跟<div>标签引用的class 前后顺序不相干，跟css中class 名称的顺序有关例2：图片1.png会下载 ?因为dom解析需要下载css，因此css中图片会下载例3：red ?因为‘css/dome.css‘是后来使用js加载进去的，渲染引擎会等待加载完毕进行再次渲染。例4：css加载不会影响dom解析，但它会影响dom渲染。因为只有所有css资源都下载完毕才会进行渲染，不然浏览器会一直重绘。总结
深入学习css其实我们还需要更加努力，就像张鑫旭大佬一样，探索css世界把它读懂、学精。
基础篇CSS你知道多少？
原文地址：https://www.cnblogs.com/xiaoxiaokun/p/9011800.html