首頁 >web前端 >css教學 >為什麼 CSS 可以使用假元素？

為什麼 CSS 可以使用假元素？

WBOY轉載: 2023-08-30 15:01:02492瀏覽

为什么 CSS 可以使用假元素？

身為前端開發人員，您應該熟悉 CSS 偽元素，包括它們的功能以及各種表示和結構應用。基本的 CSS 選擇器及其眾多屬性使用起來很有趣，但了解偽類和偽元素是成為 CSS 專家的下一步。

除了CSS偽元素之外，還有一些HTML元素通常被稱為假元素。 CSS 有時會使用它來輕鬆處理並允許開發人員在網頁中建立自訂元素。然而，它們沒有標準化，因此不能在全球範圍內使用。

在本文中，我們將討論為什麼 CSS 可以與假元素一起使用？本文首先解釋什麼是假元素、我們為什麼使用它們、它們如何運作以及假元素的許多其他基本面向。

什麼是假元素？

未在 HTML 文件中定義的 HTML 元素稱為假元素。製造假元件是可行的。您可以為元素指定任何您選擇的名稱，但不建議這樣做。 HTML 使開發人員能夠在網頁中使用自訂元素。該元素將在您的頁面中順利運行。

範例

查看以下範例以了解如何在 HTML 文件中使用 Fake 元素。

<!DOCTYPE html>
<html>
<head>
   <title> Fake Elements </title>
   <style>
      *{
         background-color: grey;
         margin: 5px;
         letter-spacing: 1px;
      }
      .para{
         font-family: cursive;
      }
   </style>
</head>
<body>
   <section>
      <heading> Programming Languages </heading>
      <p class= "para"> To communicate with computers, programmers (developers) use a programming language, which is a computer language. It is a set of instructions written in a specific language (such as C, C++, Java, or Python), built to do a certain task. </p>
      <example> Some of the most popular programming languages are: </example> <br>
      <p>
         <ol>
            <li> <h1> C/C++ </h1> </li>
            <li> <h1> Java </h1> </li>
            <li id= "demo"> <h1> Python </h1> </li>
            <li> <h1> JavaScript </h1> </li>
            <li> <h1> PHP </h1> </li>
         </ol>
      </p>
   </section>
</body>
</html>

如我們在上面的範例中所看到的，我們使用了自己的元素，例如和 ##。程式碼執行順利，文字顯示出來。然而，我們必須根據它們來設計它們的樣式。例如，如果我們使用 HTML 識別元素 (h1) 而不是，文字將自動具有更大的字體大小。要對假元素執行此操作，我們必須使用 CSS 指定字體大小。

範例

在此範例中，我們已向偽元素

和 宣告了某些 CSS 屬性。

<!DOCTYPE html>
<html>
<head>
   <title> Fake Elements </title>
   <style>
      *{
         background-color: yellow;
         margin: 5px;
         letter-spacing: 1px;
      }
      heading{
         color: black;
         text-decoration: underline;
         text-shadow: 4px 4px 4px grey;
         font-size: 28px;
      }
      .para{
         font-family: cursive;
      }
      example{
         color: red;
         font-weight: 900;
      }
   </style>
</head>
<body>
   <section>
      <heading> <h1 class= "head"> Programming Languages </h1> </heading>
      <p class= "para"> Programmers (developers) utilise a programming language, which is a computer language, to communicate with computers. It is a set of guidelines created in any particular language (C, C++, Java, Python), developed to carry out a certain task. </p>
      <example> Some of the most popular programming languages are: </example> <br>
      <p>
         <ol>
            <li> <h1> C/C++ </h1> </li>
            <li> <h1> Java </h1> </li>
            <li id= "demo"> <h1> Python </h1> </li>
            <li> <h1> JavaScript </h1> </li>
            <li> <h1> PHP </h1> </li>
         </ol>
      </p>
   </section>
</body>
</html>

我們已向假元素添加了 CSS 樣式。程式碼執行順利，樣式沒有問題。問題是這些假元素如何在 HTML 文件中運作。

答案是：隨著 HTML 功能的日益進步，大多數現代瀏覽器已經與其功能中的許多變更或添加相容。因此，無法辨識的元素會被直接解析到 DOM 樹。然而，它們不具有任何功能或特殊性。

為什麼我們不應該使用假元素？

雖然假元素在網頁中可以正常運作，但強烈建議不要在 HTML 文件中使用假元素。以下是我們不應該使用假元素的一些原因 -

HTML 規範不支援和識別這些虛假元素。
這些元素沒有指定的功能。就像
中的文字具有預先定義的字體大小一樣，假元素無法存取此類功能。
它們可能會阻礙未來標準元素（如果已開發）的功能，這些元素與假元素同名。
隨著 HTML 版本的快速修改，DOM 中可能存在最適合該特定功能的特定標準元素。
這些標籤可能會在不同瀏覽器中出現相容性問題。此外，瀏覽器渲染標準元素的速度更快。這樣，您的網頁就會順利運作。
標準 HTML 元素提供各種優勢，例如 SEO（搜尋引擎優化）和速度。它們是 Google 等流行瀏覽器的首選。
使用虛假元素表示缺乏專業精神（對於某些開發人員而言）。標準元件易於維護。此外，它還允許進一步修改（如果需要）。
使用標準 HTML 元素將使偵錯更加容易。這是因為調試工具可以輕鬆存取標準元素。

結論

可以在 HTML 文件中建立您自己的元素。然而，它們沒有任何附加的語義或功能。此外，這些元素無法被所有開發人員全域理解或使用。因此，最好使用標準 HTML 元素，這比假元素具有多種優勢。

以上是為什麼 CSS 可以使用假元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html dom 选择器伪类伪元素搜索引擎 SEO

陳述：

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

上一篇：使用哪個屬性使字體傾斜？下一篇：使用哪個屬性使字體傾斜？

看更多