css基础选择器的优先级

，简介是

，本来想统一.course-card h3 和.course-card p颜色，结果有个第三方组件用了.course-card .content span，导致样式被覆盖。
后来我就琢磨了，后代选择器虽然能精确定位，但写多了容易出bug。

群组选择器div, span, img这招我常用。
比如某个页面需要给所有元素加灰色背景，div, span, p, img, a{background: eee;}，一网打尽。
不过有个坑得注意，优先级相同时，会按顺序计算，第一个匹配到的生效。
我记得有次加全局阴影，结果div第一个，div多了个box-shadow，后来发现是另一个.card里的div没加阴影，真是麻烦。

你说的优先级计算，确实这么算。
但有个特例得注意，比如divmyDiv，虽然ID优先级1 00，但因为是后代选择器，整体优先级是1 00+1 =1 01 ，比.divClass span的1 1 高。
当时做表单的时候，表单域

<input class="form-control" name="username">，本来想用.form-control统一，结果form1 .form-control优先级更高，样式就乱套了。

说实话，CSS优先级这东西，写多了就容易混乱。
我有个习惯，重要元素直接用ID，普通元素用类，布局结构用标签，关键位置再加个!important。
当然，这只是我的个人风格，你用啥方法都行，关键是保持一致。

css的基本选择器有哪几种

说实话，CSS选择器这事儿吧，我当年刚学的时候也头疼过。
标签选择器这玩意儿最直接，就像你说的，选所有同类元素。
我有个项目就是用标签选择器统一设置所有

标签的字体，一开始觉得挺好，结果后来发现某个老设计师做的模块里混进了几个伪装成

，全被统一改样了，当时真是哭笑不得。

class选择器我用的最多。
比如做组件库的时候，一个按钮可能就有btn btn-primary两个class，优先级高那个影响大。
有意思的是，class选择器有个骚操作，你可以用element.class这种组合方式，比如.btn.active，这在UI交互里特别实用。
不过要注意，class太泛滥的话，页面渲染慢是肯定的，我这有个老项目，几百个class的DOM，浏览器卡成PPT。

id选择器这东西，我基本只用在全局导航或者弹出层上。
比如main-nav、login-modal，这种唯一标识的元素用id最合适。
但有个坑，以前有个客户非要我在一堆营销Banner上用id，结果他换了几个Banner，忘了改id，整个页面样式乱成一锅粥。
所以现在教新人，我第一句就讲：id在一个页面里必须唯一，别乱用。

优先级这块，我印象最深的是内联样式，这玩意儿太霸道了。
有次改一个老系统，改CSS根本没用，得去改HTML里直接加的style="color: red;"。
后来发现是某个插件默认加了内联样式，改了半天。
所以现在写CSS，我尽量不直接用内联，改class或者id方便多了。

整体来说，这三者得配合着用。
标签选基础，class搞复用，id做特殊标记。
不过现在CSS3 新选择器也多了，比如:hover、[data-type="foo"]这种，用起来更灵活，但兼容性还是得看情况。
我有个项目用:focus做键盘导航，结果IE1 1 直接卡死，真是让人头疼。

标签： font-family 选择器定位