色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css權(quán)重計算例題

CSS
孫倡高1年前9瀏覽0評論

當(dāng)多個 CSS 規(guī)則同時作用于同一個元素時，就會涉及到 CSS 權(quán)重的計算。下面我們來看一個權(quán)重計算的例題。

<!DOCTYPE html>
<html>
<head>
	<title>CSS權(quán)重計算例題</title>
	<style type="text/css">
/* CSS規(guī)則1 */
p {
color: red;
font-size: 18px;
}
/* CSS規(guī)則2 */
#content p {
color: blue;
}
/* CSS規(guī)則3 */
p .text {
color: green;
font-size: 20px;
}
	</style>
</head>
<body>
	<div id="content">
<p class="text">這是一個段落的內(nèi)容</p>
	</div>
</body>
</html>

假設(shè) HTML 頁面中只有一個段落元素，即上述代碼中的

，那么這個段落元素最終呈現(xiàn)出來的樣式是怎樣的呢？

我們可以根據(jù) CSS 權(quán)重來進(jìn)行計算，CSS 權(quán)重的計算方法如下：

  • 標(biāo)簽選擇器的權(quán)重為 1
  • 類選擇器和偽類選擇器的權(quán)重為 10
  • id 選擇器的權(quán)重為 100
  • 內(nèi)聯(lián)樣式的權(quán)重為 1000
  • !important 規(guī)則的權(quán)重為最高，為無窮大

根據(jù)上述規(guī)則，我們可以得到如下權(quán)重的計算結(jié)果：

  • p標(biāo)簽選擇器權(quán)重為 1
  • .text類選擇器權(quán)重為 10
  • #content pID 選擇器和標(biāo)簽選擇器的結(jié)合體權(quán)重為 101
  • p .text標(biāo)簽選擇器和類選擇器的結(jié)合體權(quán)重為 11

因此，最終p元素的樣式為：

  • 顏色是綠色 (p .text的權(quán)重是 11，大于p的權(quán)重 1，所以.text中的顏色樣式被應(yīng)用)
  • 字體大小是 20px (p .text的權(quán)重是 11，大于p的權(quán)重 1，所以.text中的字體大小樣式被應(yīng)用)

總之，在多個 CSS 規(guī)則作用于同一個元素時，要根據(jù)權(quán)重規(guī)則來進(jìn)行優(yōu)先級的計算，以便最終得到正確的樣式。