亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

在這節里8行代碼去掉p后用!important似乎對部分文字失效

在這節里

p{color:red!imoprtant:}

加上!important后 全文變紅

但是去掉下方p.first{color:green:}前的p

發現綠色設置對第二段的簡單依然有作用是為什么

-----------------------由于至此回答的答案不能解決問題,因此補充-------------------------------

由此開始:

<style type="text/css">

? ? ? ? p{color:red!important;}/*權值變為最高*/

? ? ? ? p.first{color:green;}/*類選擇器 權值為10*/

</style>

</head>

<body>

? ? <h1>勇氣</h1>

? ? <p class="first">三年級時,我還是一個<span>膽小如鼠</span>的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>

? ? <p id="second">到了三年級下學期時,我們班上了一節公開課,老師提出了一個很<span class="first">簡單</span>的問題,班里很多同學都舉手了,甚至成績比我差很多的,也舉手了,還說著:"我來,我來。"我環顧了四周,就我沒有舉手。</p>

? ??

</body>

</html>

由于上面的權值比較高所以全文為紅色 包括第一段和第二段所有文字

那么修改下css樣式 將上文中p.first去掉p 改為.first

<style type="text/css">

? ? ? ? p{color:red!important;}/*權值變為最高*/

? ? ? ? .first{color:green;}/*類選擇器 權值為10*/

</style>

修改完以后發現全文依然會變紅 但是正文第二段中的<span class="first">簡單</span> 依然會被.first作用為綠色

這里我的問題是,為什么去掉p以后 正文第二段的簡單依然會變為綠色 上下兩段css的權重到底怎么算?

? ? 請各位賜教,不勝感激。

正在回答

8 回答

不去p,!important權重最高,全為紅色,span中繼承了p的顏色屬性也為紅,此時類選擇器定義的為父元素,對子元素span無意義。去掉后,繼承紅色權重0.1,span類選擇權重10,故呈現綠色。不知這樣理解對不對。

1 回復 有任何疑惑可以回復我~
#1

哦88 提問者

我也這樣理解
2016-05-25 回復 有任何疑惑可以回復我~
#2

Awesomett 回復 哦88 提問者

試試看p .first{color:green;} (加了空格) 然后第二段的簡單成了綠色、第一段沒有變。 我還沒想清楚...
2016-05-25 回復 有任何疑惑可以回復我~
#3

哦88 提問者 回復 Awesomett

1. p.fisrt是p下面所有class=first的部分 所以只對第一段起作用。 .first 是所有class=first的內容 所以對第一段和第二段的簡單起作用
2016-05-26 回復 有任何疑惑可以回復我~
#4

哦88 提問者 回復 Awesomett

2.我們加上!important后 p{color:red!important;}/*權值變為最高*/ p.first{color:green;}/*類選擇器 權值為10*/ 所以第一段顯示為權值最高的紅色
2016-05-26 回復 有任何疑惑可以回復我~
#5

哦88 提問者 回復 Awesomett

3.在我們將p去掉時候 p{color:red!important;}/*權值變為最高*/ .first{color:green;}/*類選擇器 權值為10*/ 沒錯,紅色的權值最高,所以全文變紅色 但是<p id="second"><span>簡單</span></p>中 <span>為繼承屬性 所以權值在通用選擇器p中變為0.1 也就是對于p{color:red!important;}這一部分從最高權重變為了0.1 因為10>0.1 所以變為綠色
2016-05-26 回復 有任何疑惑可以回復我~
查看2條回復

先看“p.first{}”和“p空格.first{}”的區別,前者選中的是第一個p段落,后者選中的是p段落中的后代子元素。在沒有加上“!important”時,先加上空格,因為內部元素的優先級更高,全段除了“簡單”2字都為紅色;去掉空格,第一段綠色第二段紅色,說明跟權值沒關系,不加空格的p.first{}就是指定了第一個段落?,F在我們加上“!important”,先加上空格,內部元素的優先級更高,所以有“簡單”為綠色全文為紅色;去掉空格,全文自然都是紅色

0 回復 有任何疑惑可以回復我~

我是這樣理解的

.first{color:green;}和p.first{color:green;}以及p. first{color:green;}(加了空格)

其中沒加空格的話、是沒有包含的、也就是說.first的對象是p標簽元素,沒有作用于span標簽。

加了空格之后包含了span標簽。

而由于p{color:red!important;}的存在、p標簽元素的最高權值是這個。

但是span標簽元素的紅色效果是繼承的、繼承的權值很小,所以加了空格之后可以顯示.first內的修飾效果。

如果不加p的話、更好理解了,就是因為第一個<p class="first">是在<p>內的所以被!important影響了權值。

但是<span class="first">的話、沒有被!important影響權值問題,只是有個繼承效果。

所以最后顯示了.first的修飾效果。


不知道對不對、我自己總結的、還希望有大神出來拉我一把...謝謝。

2 回復 有任何疑惑可以回復我~

我是這樣想的,因為有p,所以兩個p中有!important的最大,應用它的屬性。當把下面的p去掉后,上面的對于下面而言是繼承,所以只有0.1,而類選擇器有10,所以簡單就是綠色的了。(不知道是不是這樣理解,有錯誤還請大神們指出)

0 回復 有任何疑惑可以回復我~

我也有同樣的疑問

1 回復 有任何疑惑可以回復我~

按照標簽的重要性判斷

0 回復 有任何疑惑可以回復我~

!important ?你就看成他的地位最高

0 回復 有任何疑惑可以回復我~

因為有一個權重。。加了 !important 以后 權重會增加, ?也就會全部以此為主, 如果不加!important ? ?p{} 的權重沒有 p.first{} ?大 ?所以后面又以p.first{}為主

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

在這節里8行代碼去掉p后用!important似乎對部分文字失效

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號