vue mand-mobile ui加class不起作用的問題 css權重問題
組件的樣式優先權比自己定的class高
多加幾層權重才行,要直接用樣式覆蓋也可以在前面多加幾層class,定位更精確了才會覆蓋組件的樣式
覆蓋的class要跟組件一樣,中間不能空開,空開了就不生效了。
覆蓋的class要跟組件一樣,中間不能空開,空開了就不生效了。
<md-button type="warning" class="coin_down">{{coin.rise_range}}</md-button>
.coin_down {
font-size: 25px;
font-weight: 600;
color: #ffffff;
background-color: #05c19e !important;
padding: 20px;
width: 170px;
}
我這個顏色必須用 !important 才生效
試了是type="warning" 導致的,去掉type="warning" 效果就不一樣了
button.coin_down 權重比 .coin_down 高,保留type="warning" ,
用button.coin_down{},不用 !important 也可以了
vue 重名的不多,都是有作用域
而且,你可以用less,sass
嵌套寫下去
庫的class都是 .name{}
可以用.myname .name{}
=================
tab-bar加了class改顏色不生效的
.md-tab-bar .md-tab-title.active {
color: #ff384f !important;
}
.md-tab-bar .ink-bar {
background: #ff384f !important;
}
直接用這個覆蓋才生效
正確的做法是加color屬性參數
<md-icon name="hollow-plus" size="lg" color="#ff384f"></md-icon>
要直接用樣式覆蓋也可以在前面多加幾層class,定位更精確了才會覆蓋組件的樣式
=================
推薦篇講css權重的文章學習下:
css的優先級 和 權重 - 十步殺一人千里不留行 - 博客園
https://www.cnblogs.com/cnblogs-jcy/p/8574177.html
深入理解css優先級 - starof - 博客園
https://www.cnblogs.com/starof/p/4387525.html
CSS 選擇器權重計算規則 - 全全的前端漿糊 - 博客園
http://www.cnblogs.com/dq-Leung/p/4213375.html
CSS選擇器的權重與優先規則 -- 簡明現代魔法
http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php
如果確實有棘手的情況,可以在Firebug中查看優先級。Firebug中按照優先級排序顯示規則,將優先級更高的規則顯示在最上面,並將被覆蓋的規則用刪除線划掉。
單個選擇器的優先級比較:
css屬性!important
》內聯樣式
》ID選擇器(#id)
》類選擇器(.class) = 偽類選擇器(:hover等) = 屬性選擇器[type等]
》元素選擇器(p等) = 偽元素選擇器(:after/:before/::selection等)
》通用選擇器(*)
》繼承的樣式
================
為什么沒有把!import放在優先級順序中,因為官方認為!import和優先級沒一點關系。
不建議使用!import
Never 絕不要在全站使用!import。
Only 只在需要覆蓋全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定頁面中使用 !important
Never 永遠不要在你的插件中使用 !important
Always 要優先考慮使用樣式規則的優先級來解決問題而不是 !important
選擇元素時盡量不要多選,不要放寬選擇器的范圍。因為范圍越小,越具有針對性,優先級越高。
1、什么場合使用!import?
使用!import的場合也是有的,但是是在沒有別的解決方案的時候。
比如需要覆蓋內聯樣式,因為內聯樣式的優先級最高,只能用!import去覆蓋內聯樣式。