CSS 中星號前面的屬性有什麼用？-css教學-PHP中文網

首頁

web前端

css教學

CSS 中星號前面的屬性有什麼用？

王林

Sep 16, 2023 pm 02:53 PM

CSS 中星号前面的属性有什么用？

在 Web 開發中，CSS（層疊樣式表）使開發人員能夠確定網站的視覺外觀和佈局。然而，由於不同的瀏覽器對CSS的支援機制不同，因此編譯器渲染網頁時可能會出現不一致的情況。

為了克服這個相容性問題，開發人員通常選擇使用 CSS hacks 來確保他們的網頁在不同的瀏覽器和裝置上顯示一致。其中一種駭客行為是星號屬性（也稱為星號屬性駭客），它用於針對對 CSS 的支援有限的特定版本的 Internet Explorer (IE)。

在本文中，我們將探討 CSS 中的星號屬性 hack，並討論其用途和限制。我們還將提供如何有效使用此技巧的範例以及在 CSS 程式碼中實現它的最佳實踐。

明星先行財產

這是一個 CSS hack，用來宣告 HTML 元素的不同屬性。前面帶有星號 (*) 或底線 (_) 的屬性，在 IE 7 及以下版本的 IE 中僅呈現，而對於 IE 8 及更高版本，它會被編譯器視為垃圾。

文法

element{
   background-color: red;  // for other browsers
   _background-color: red;   // for IE 6 and below
   *background-color: red;   // for IE 7 and below
}

現在，讓我們透過範例來更好地理解這一點。我們將使用此 hack 在 IE 6、IE 7 和其他瀏覽器中渲染屬性。

注意 - 此 hack 用於不同的瀏覽器，因此在指定的瀏覽器中執行程式以觀察正確的輸出。

範例

以下說明如何讓編譯器將 CSS 屬性渲染到 Internet Explorer 7 及更低版本中的元素。

<!DOCTYPE html>
<html>
<head>
   <title>Internet Explorer 7 and Below Versions</title>
   <style>
      .my-div {
         background-color: red;
         width: 30%;
         height: 80%;
         padding: 3px;
         letter-spacing: 1px;
         margin-top: 40px;
         /* default margin applied in all other browsers */
         *margin-top: 0;
         /* IE6 margin */
      }
   </style>
</head>
<body>
   <h1 id="Star-Preceded-Property">Star Preceded Property</h1>
   <h3 id="Given-below-is-a-div-element-whose-margin-top-will-be-in-IE-while-it-will-be-px-in-all-other-browsers">Given below is a div element whose margin-top will be 0 in IE 6 while it will be 20px in all other browsers.</h3>
   <div class="my-div"> This is my div element. </div>
</body>
</html>

對於 IE7 及以下版本，div 元素的 margin-top 為零。

如果您在任何其他瀏覽器中執行程式碼，則 div 元素的 margin-top 為 40px。

在上面的範例中，CSS 選擇器 .my-div 套用 40 像素的上邊距。但是，*margin-top: 0; 規則僅適用於 Internet Explorer 6，將邊距設為 0 像素。屬性名稱 (margin-top) 之前的星號 (*) 是「星號屬性 hack」中的「星號」。這是其他瀏覽器中的語法錯誤，因此它們會忽略這一行。

範例

在下面說明了另一種使編譯器將 CSS 屬性呈現給 Internet Explorer 6 及更低版本中的元素的另一種方法。它不適用於 IE 7。

<!DOCTYPE html>
<html>
<head>
   <style>
      .my-div {
         background-color: blue;
         /* default background color */
         width: 30%;
         height: 80%;
         padding: 3px;
         letter-spacing: 1px;
         _background-color: red;
         /* background color in IE 6 and below versions */
      }
   </style>
</head>
<body>
   <h1 id="Star-Preceded-Property">Star Preceded Property </h1>
   <h3 id="Given-below-is-a-div-element-whose-background-color-will-be-red-in-IE-and-below-while-it-will-be-blue-in-all-other-browsers">Given below is a div element whose background color will be red in IE 6 and below while it will be blue in all other browsers.</h3>
   <div class="my-div"> This is my div element. </div>
</body>
</html>

對於IE6及以下版本，div元素的背景顏色將為藍色。

如果您在任何其他瀏覽器中執行程式碼，背景顏色將為紅色。

在上面的範例中，CSS 選擇器 .my-div 會套用紅色背景顏色。但是，_background-color: blue; 規則僅適用於 Internet Explorer 6，將背景顏色設為藍色。

Star Property Hack 的用途與限制

「星號屬性」是過去使用的技術，用於使用 CSS 樣式來定位特定版本的 Internet Explorer。雖然它有效地實現了這一目標，但它也有一些優點和缺點。

用途

它可讓 Web 開發人員將各種特定的 CSS 樣式套用到舊版的 Internet Explorer，而不會影響所有其他瀏覽器中的結果。這有助於為跨多個瀏覽器的用戶創建一致且統一的體驗。
它易於使用並減少了程式碼數量，使其成為對 Web 開發人員有吸引力的替代方案。它阻止他們為特定瀏覽器編寫條件註釋或特定樣式表。
它在 Web 開發社群中被廣泛使用和流行，這使得找到範例和支援變得很容易。而且，它也很用戶友好。

限制

「星號先於財產」是一種駭客行為。這不是編寫 CSS 程式碼的標準且相容的方式。它依賴 Internet Explorer 中的一個錯誤來運作。此外，不保證它可以在瀏覽器的未來修改版本或其他瀏覽器中運作。
這使得程式碼更難以閱讀和維護。由於它涉及編寫非標準程式碼，因此如果沒有額外的註解或文檔，很難理解程式碼的用途。
這可能會導致意想不到的後果，例如影響頁面上的其他元素或導致瀏覽器出現意外行為。

結論

此技術是一種針對具有不同樣式的特定瀏覽器的方法，為 Internet Explorer 6 等舊版瀏覽器提供後備。總體而言，雖然「星屬性駭客」在當時很有用，但不再建議將其作為最佳選擇網頁開發實踐。現代 Web 開發技術專注於使用可在多個瀏覽器上運行的標準且相容的程式碼，而不是依賴特定於瀏覽器的駭客攻擊。

以上是CSS 中星號前面的屬性有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除