權重這個概念，相信對許多進行過前端開發的小夥伴來說肯定並不陌生，有時候乙個樣式新增不上，我們就會乙個!important懟上去，一切就好像迎刃而解了。但還有的時候，!important也並不能解決我們的問題，下面請跟隨我來詳細了解一下css的權重吧！
指某一因素或指標相對於某一事物的重要程度，其不同於一般的比重，體現的不僅僅是某一因素或指標所佔的百分比，強調的是因素或指標的相對重要程度，傾向於貢獻度或重要性。分析以下**中文字的最終顏色。
<div
class
="myclass"
id="myid"
style
="color:yellow; /* 權重1000 */"
>不是酸檸檬
div>
<
style
>
div.myclass
#myid
style
>
接下來我們加大難度試試。
<div
class
="myclass"
id="myid"
style
="color:yellow; /* 權重1000 */"
>不是酸檸檬
div>
<
style
>
div.myclass
#myid
style
>
∞+10，id選擇器的權重是∞+100所以顯示為id選擇器的顏色。
那如果我就想讓他顯示紅色呢？我嘗試以下**
.myclass
!important這樣用會造成報錯，!important的作用是給當前樣式加權重，但不能多次疊加。
<div
class
="myclass"
id="myid"
style
="color:yellow;"
>不是酸檸檬
div>
<
button
onclick
="document.queryselector('#myid').style.color='green'"
>改變顏色
button
>
<
style
>
div.myclass
#myid
style
>
其實多思考以下就能想到，我們通過id找到了這個元素，然後修改他的顏色，所以本質上修改的是這個div的顏色，也就是行內元素，但是此時id選擇器的權重最大，所以點選按鈕之後是不會修改成我們想要的綠色的。
那麼如果在js中修改時給綠色加權重呢，不妨試一下以下**
<button
onclick
="document.queryselector('#myid').style.color='green !important'"
>改變顏色
button
>
!important也不能這樣使用，這不符合js的語法規則，所以無論如何點選，顏色都不會改變的。
通過以上例項，我們了解到了，簡單好用的!important在一些場景裡也是不好用的，尤其是當你隨手拿來乙個庫使用的時候，你了解不到它內部的權重分布，所以樣式操作起來也不能夠得心應手。
當然你也不用糾結，乙個優秀的庫或者框架都是很少使用!important的，當你發現你的樣式作用不上的時候，完全可以利用id選擇器來增加權重，實現你想要的效果。
!important雖好，也不要亂用哦~
前端深入系列是乙個踩坑系列，是由我本人對工作和學習中所遇到的問題和踩過的坑的乙個探索與總結，在此記錄分享出去，同時也是對自我技能的乙個反思和追問。
前端路漫，踩坑不斷。
前端深入系列持續更新中……
以上2019-9-27。
前端之CSS篇
css本質就是乙個樣式表 主要由選擇器和宣告兩個部分組成，宣告部分又包括屬性跟屬性值 注釋 多行注釋 內部樣式 外部樣式 將css 寫在單獨的檔案中，再進行引用 行內樣式 hello world id選擇器 id名 類選擇器 類名 元素選擇器 元素名 通用選擇器 例子 id1 c1p 後代選擇器 作...
你真的了解嗎 CSS 溢位 浮動 定位
position sticky overflow 屬性用於控制內容溢位元素框時顯示的方式 屬性值描述 visible 預設值。內容不會被修剪，會呈現在元素框之外 hidden 內容會被修剪，並且其餘內容是不可見的 scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容 auto 如果內...
你真的了解css中的換行嗎
我們經常會遇到這樣的問題，純數字不能自動換行，連續輸入的英文不能換行，或者篇文章中一行到達容器的末端以後沒有在我們想要的位置進行換行，換行後會截斷某個單詞等問題，今天我們就說說css中關於換行的一些屬性，和使用技巧 在介紹之前我們先來看一下瀏覽器預設情況下文字的超出容器的處理情況 案例展示 通過上邊...