資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究為什麼 CSS 可以與偽元素一起工作？
作為一名前端開發者，您應該熟悉 CSS 偽元素，包括其功能以及各種表現和結構應用。基本的 CSS 選擇器及其眾多屬性使用起來很有趣，但理解偽類和偽元素是成為 CSS 專家邁出的下一步。
除了 CSS 偽元素之外，還有一些 HTML 元素通常被稱為偽元素。CSS 有時會使用它們來方便處理，並允許開發人員在網頁中建立自定義元素。但是，它們沒有標準化，因此不能全域性使用。
在本文中，我們將討論為什麼 CSS 可以與偽元素一起工作？從解釋什麼是偽元素、為什麼要使用它們、它們如何工作以及偽元素的許多其他基本方面開始本文。
什麼是偽元素？
HTML 文件中未定義的 HTML 元素稱為偽元素。建立偽元素是可行的。您可以為您的元素選擇任何名稱，但這並不推薦。HTML 允許開發人員在網頁中使用自定義元素。該元素將在您的頁面中順利執行。
示例
請檢視以下示例，瞭解如何在 HTML 文件中使用偽元素。
<!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>
如上例所示，我們使用了自己的元素，如 <heading> 和 <example>。程式碼順利執行，並且顯示了文字。但是，我們必須相應地為其設定樣式。例如，如果我們使用 HTML 識別的元素 (h1) 而不是 <heading>，則文字將自動具有更大的字型大小。要對偽元素執行此操作，我們必須使用 CSS 指定字型大小。
示例
在此示例中，我們已將某些 CSS 屬性宣告為偽元素 <heading> 和 <example>。
<!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 規範不支援和識別這些偽元素。
這些元素沒有指定的功能。例如，<header> 內的文字具有預定義的字型大小，而偽元素無法訪問此類功能。
它們可能會阻礙將來標準元素（如果開發）的功能，這些元素與偽元素具有相同的名稱。
隨著 HTML 版本的快速修改，有可能 DOM 中存在一個特定的標準元素，該元素最適合該特定功能。
這些標籤可能會在不同的瀏覽器中導致相容性問題。此外，瀏覽器渲染標準元素的速度更快。因此，您的網頁將順利執行。
標準 HTML 元素提供了各種優勢，例如 SEO（搜尋引擎最佳化）和速度。它們是 Google 等流行瀏覽器所青睞的。
使用偽元素表明缺乏專業性（對於某些開發人員而言）。標準元素易於維護。此外，它允許進一步修改（如果需要）。
使用標準 HTML 元素將使除錯更容易。這是因為標準元素可以透過除錯工具輕鬆訪問。
結論
可以在 HTML 文件中建立自己的元素。但是，它們沒有任何附加的語義或功能。此外，這些元素不能被所有開發人員全域性理解或使用。因此，最好使用標準 HTML 元素，它提供了優於偽元素的各種優勢。
136 次檢視
