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

CSS 樣式級聯

瀏覽器使用以下順序查找屬性值。

  • 內聯樣式 -使用元素上的style全局屬性定義的樣式
  • 嵌入式樣式 -在樣式元素中定義的樣式
  • 外部樣式 -使用鏈接元素導入的樣式
  • 用戶樣式 -已由用戶定義的樣式
  • 瀏覽器樣式 -瀏覽器應用的默認樣式

例如，為一個元素選擇文本的顏色。

瀏覽器將需要為CSS顏色屬性找到一個值。

首先，它將檢查它試圖渲染的元素是否具有定義顏色值的內聯樣式，如下所示：

<a style="color:red" >Visit the website</a>

如果沒有內聯樣式，瀏覽器將查找包含適用于元素的樣式的樣式元素，如下所示：

<style type="text/css">
a  {
   color: red;
}
</style>

如果沒有這樣的樣式元素，瀏覽器會查看通過鏈接元素加載的樣式表。
如果仍然找不到顏色屬性，則使用默認的瀏覽器樣式。

注意

屬性的前三個來源（內聯樣式，嵌入樣式和樣式表）統稱為作者樣式。

用戶樣式表中定義的樣式稱為用戶樣式，瀏覽器定義的樣式稱為瀏覽器樣式。

重要樣式

您可以通過將屬性值標記為重要來覆蓋正常的級聯順序。

通過對聲明附加！important，可以將單個值標記為重要。

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a  {
   color:  black !important;
}
</style>
</head>
<body>
    <a style="color:red" >Visit the website</a>
    <p>This is a text.</p>
    <a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>

瀏覽器優先選擇重要的樣式，無論它們在何處定義。

你可以看到屬性重要性的影響。 color屬性的嵌入值將覆蓋內聯值。

特異性和順序評估

如果有兩個樣式應用于在同一級別定義的元素，并且它們都包含瀏覽器正在尋找的CSS屬性的值。

要決定使用哪個值，瀏覽器會評估每個樣式的特異性，并選擇最具體的值。

瀏覽器通過計算三個不同的特征來確定樣式的特異性：

  • 樣式選擇器中的id值的數量
  • 選擇器中的其他屬性和偽類的數量
  • 選擇器中元素名稱和偽元素的數量

瀏覽器合并來自每個評估的值，并應用來自最特定樣式的屬性值。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a  {
   color: black;
}
a.myclass  {
    color:white;
    background:grey;
}
</style>
</head>
<body>
    <a >Visit the website</a>
    <p>The is a test.</p>
    <a class="myclass"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>

當評估特異性時，您以a-b-c的形式創建一個數字，其中每個字母是三個特征之一的總和。

只有a值相等，瀏覽器才會比較b值。

只有當a和b的值相同時，瀏覽器才會考慮c值。

1-0-0的特異性得分比0-2-2更特異。

在上面的代碼中，selector a.myclass包含一個類屬性，這意味著樣式的特殊性是0-1-0。 0用于id值，1用于其他屬性，0用于元素名稱。

當呈現已分配給myclass類的元素時，瀏覽器會為color屬性找到一個值。對于所有其他的元素，將使用另一個樣式的值。

當在具有相同特定性的樣式中定義值時，瀏覽器根據順序選擇值。

例子

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a.myclass1 {
   color: black;
}
a.myclass2  {
    color:white;
    background:grey;
}
</style>
</head>
<body>
    <a >website</a>
    <p>This is a paragraph.</p>
    <a class="myclass1  myclass2"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >W3C</a>
</body>
</html>


繼承

如果瀏覽器找不到一個可用樣式中的值，它將使用繼承。

繼承意味著獲取由父元素定義的屬性的值。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p  {
    color:white;
    background:grey;
    border: medium solid black;

}
</style>
</head>
<body>
    <a >website</a>
    <p>This is a <span>test</span>.</p>
    <a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >W3C</a>
</body>
</html>

span元素的父代是p元素。

span元素從父p元素繼承color屬性。

不是所有的CSS屬性都是??繼承的。

只有與外觀相關的是繼承的，包括文本顏色，字體詳細信息等。

與布局相關的不是繼承。

inherit關鍵字

你可以通過使用inherit在樣式中強制繼承，

inherit顯式地告訴瀏覽器對屬性使用父元素的值。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p  {
    color:white;
    background:grey;
    border: medium solid black;
}
span  {
    border: inherit;
}
</style>
</head>
<body>
    <a >website</a>
    <p>This is a <span>test</span> from www.w3cschool.cn.</p>
    <a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >W3C</a>
</body>
</html>