你知道吗？在写CSS样式表里，选对选择器，页面就能飞快显示出来。但是如果选错了，特别是用了一堆通配符，那就会乱套。所以，今天我来给你讲讲如何调整这些通配符，写出更顺手、速度更快的样式表，让你网站运行起来爽快利落，用户看着舒服，用着也舒心！
选择器右对齐
千万记住这点小错误！做CSS时最好把通配符放后面，不要放前头。否则浏览器得从开头逐字分析整段HTML，速度慢得跟蜗牛似的。你看看这个，是不是感觉像是在大海里捞稻草？
要电脑跑得更溜？换个地方，找准关键字（别找错了哦），速度自然就上去！
别老是靠通用符了，它真的让我们的CSS速度变慢！通用符就像个大筐子，啥都能装进去。其实大部分情况下，我们根本就不需要通用符，用点特色的选，比如以ID或者class锁定某个元素，速度反而更快哟。举个栗子，这句代码可以把网页上的所有元素全改成100%宽：
<pre class='brush:css;toolbar:false;’>* h1 {
color: red;
}
要是明白要找啥或有某个ID，直接用那个对应的选框就好！
h1 * {
color: red;
}
使用具体的选择器
别忘了给元素取个特别点的编号或者类名啥的，这样浏览器就能快点找到它们了！如果你只是想给某个元素换个装扮，那就直接选中它，千万别用通用符号或者几对嵌套的选择器。比如说，这个选择器就只能帮我们搞定那些叫”my-element”的元素啦：
告诉你，这事儿就好比得先挑出文档内所有内容，再按类别来分。
避免使用嵌套的通配符
* {
width: 100%;
}
别使通配符过量了，这样会拖慢速度的。直接说，咱们想找所有叫”my-element”的东西及其后面跟着的东西。
.my-element {
width: 100%;
}
别让电脑卡了，赶紧选中类名和元素包装起来，这样就能缩小搜索范围！
你得明白，搞懂CSS选色器里头的通配符号，代码速度就能嗖嗖地快上去。记住，通配符号最好放在右边，数量越少越好，实在要用就换点明确的选择器。千万别弄太多复杂的通配符嵌套，多用些直接明了的选择器，慢慢调整优化，效果绝对不会差！
记住咱们学过的那些技巧，还有其他方法能让你的CSS更强大！比如你写HTML时，尽量用实意标签和类名，这样比瞎折腾嵌套和重复样式好多了。
说起APPs或者大型网站出毛病，咱们可以试试看模块式开发比如说用Webpack这个神器把代码压缩合在一起，那就能省下好多没必要的HTTP请求。
* {
color: red;
}
.my-element {
color: initial;
}
记住，学好前端CSS选择器相当关键！如果利用一些巧妙招数提速，网站就可以加载更快，同时用户体验也会更好！
评论0