CSS-Pseudo-Selektor-Lernanalyse von Pseudo-Element-Selektoren

Im vorherigen Artikel „Was ist ein hierarchischer Selektor in CSS? Wie benutzt man es? “, haben wir 4 Arten hierarchischer Selektoren kennengelernt. Lassen Sie uns über Pseudoselektoren sprechen. Sie bieten komplexere Funktionen, entsprechen aber nicht direkt den Elementen, die HTML-Dokumente haben sollten. Es gibt zwei Haupttypen von Pseudoselektoren: Pseudoelemente und Pseudoklassen. Lassen Sie uns zunächst ausführlich über Pseudoelementselektoren sprechen.

Pseudoelement-Selektor

Der Pseudoelement-Selektor in CSS dient zum Hinzufügen von Schlüsselwörtern zum angegebenen CSS-Selektor. Wird verwendet, um den Stil eines bestimmten Teils eines angegebenen Elements zu beschreiben. [Empfohlenes Lernen: CSS-Video-Tutorial]

Durch Pseudoelemente können Entwickler Stile für bestimmte Teile der ausgewählten Elemente definieren, ohne die ID oder Klassenattribute der Elemente zu verwenden. Mithilfe von Pseudoelementen können Sie beispielsweise den Stil des ersten Buchstabens in einem Absatz festlegen oder Inhalte vor oder nach dem Element einfügen usw.

In CSS1 und CSS2 ist die Verwendung von Pseudoelementen dieselbe wie die von Pseudoklassen, und ein Doppelpunkt : ist mit dem Selektor verbunden. Allerdings wurde in CSS3 die Verwendung eines einzelnen Doppelpunkts für Pseudoelemente in einen Doppelpunkt :: geändert, um Pseudoklassen und Pseudoelemente zu unterscheiden. Daher wird empfohlen, bei der Verwendung von Pseudoelementen Doppelpunkte anstelle von Einzelpunkten zu verwenden. :与选择器相连。但在 CSS3 中，将伪元素单冒号的使用方法改为了使用双冒号::，以此来区分伪类和伪元素。因此，建议在使用伪元素时使用双冒号而不是单冒号。

语法结构如下所示：

/* CSS3 语法 */
选择器::伪元素 {
  属性 : 属性值;
}
/* CSS2 过时语法 (仅用来支持 IE8) */
选择器:伪元素 {
  属性 : 属性值;
}

现在应该都采用两个冒号的方式，除非你还兼容IE8。

注意：一个选择器中只能使用一个伪元素，而且伪元素必须紧跟在选择器之后。按照最新的 W3C 规范，在定义伪元素时您应该使用双冒号::而不是单个冒号:

Die Syntaxstruktur ist wie folgt:

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::before和::after伪元素</title>
    <style>
        p::before {
            content: "♥";
        }

        p::after {
            content: "♥";
        }
    </style>



    <p>这是一段测试内容</p>

Sie sollten jetzt zwei Doppelpunkte verwenden, es sei denn, Sie sind auch mit IE8 kompatibel.

Hinweis: In einem Selektor kann nur ein Pseudoelement verwendet werden, und das Pseudoelement muss dem Selektor folgen. Gemäß der neuesten W3C-Spezifikation sollten Sie beim Definieren von Pseudoelementen doppelte Doppelpunkte :: anstelle von einzelnen Doppelpunkten : verwenden, um Pseudoklassen von Pseudoelementen zu unterscheiden. Da die alte Version der W3C-Spezifikation jedoch keine besondere Unterscheidung vorsah, unterstützen die meisten Browser derzeit sowohl Einzel- als auch Doppelpunktmethoden zur Definition von Pseudoelementen. Pseudoelemente BeispielBeispiel. Beschreibung::afterp::after in jeweils Inhalt nach dem

-Element einfügen

::beforep::beforeInhalt vor jedem

-Element einfügen

::first-letterp::first- Buchstabeentspricht dem ersten Buchstaben::first-linep::first-lineentspricht der ersten Zeile jedes

-Elements

::selectionp::selection entspricht dem vom Benutzer ausgewählten Teil des Elements::placeholderinput::placeholder

CSS stellt eine Reihe von Pseudoelementen bereit, wie in der folgenden Tabelle gezeigt:

🎜entspricht dem Platzhalterattribut jedes Formulareingabefelds (z. B. ) 🎜🎜🎜🎜

::before和::after伪元素

::before 伪元素 的作用是作为定位的HTML元素的第一个子级元素，::after ** 伪元素** 的作用是作为定位的 HTML元素的最后一个子级元素。

如下示例代码展示了::before和::after伪元素的用法：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::before和::after伪元素</title>
    <style>
        p::before {
            content: "♥";
        }

        p::after {
            content: "♥";
        }
    </style>



    <p>这是一段测试内容</p>

代码运行结果如下图所示：

如上述示例代码所示，::before伪元素和::after伪元素通常会配合content属性来为该元素增加装饰内容。

content属性用于在元素的::before伪元素和::after伪元素中插入内容。该属性具有的值如下所示：

• none：不会产生伪类元素。

• normal：::before伪元素和::after伪类元素中会被视为 none。

• text：文本内容。

• url：格式为url()，指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位。

::first-letter和::first-line伪元素

::first-letter和::first-line伪元素分别匹配文本的第一个字和第一行的样式内容。示例代码如下：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::first-letter和::first-line伪元素</title>
    <style>
        /* 匹配第一行 */
        p::first-line {
            background-color: lightcoral;
        }

        /* 匹配第一个字 */
        p::first-letter {
            font-size: 130%;
        }
    </style>



    <p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；</p>

代码运行结果如下图所示：

值得注意的是::first-letter和::first-line伪元素可以使用的CSS属性是有限制的。

::first-letter选择器可以设置的CSS属性：

• font属性

• color属性

• background属性

• margin属性

• padding属性

• border属性

• text-decoration属性

• vertical-align属性

• text-transform属性

• line-height属性

• float属性

• clear属性

::first-line选择器可以设置的CSS属性：

• font属性

• color属性

• background属性

• word-spacing属性

• letter-spacing属性

• text-decoration属性

• vertical-align属性

• text-transform属性

• line-height属性

• clear属性

::selection伪元素

::selection伪元素的作用是匹配用户在HTML页面选中的文本内容（比如使用鼠标或其他选择设备选中的部分）设置高亮效果。如下示例代码展示了::selection伪元素的用法：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::first-letter和::first-line伪元素</title>
    <style>
        p::selection {
            color: gold;
            background-color: red;
        }
    </style>



    <p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；</p>

代码运行结果如下图所示：

::placeholder伪元素

伪元素 ::placeholder 用来设置表单元素（、 元素）的占位文本（通过 HTML 的 placeholder 属性设置的文本），示例代码如下：    

<!DOCTYPE html>
<html>
<head>
    <style>
        input.text::placeholder{
            color: red;
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <input placeholder="请输入一段文本">未使用伪元素 ::placeholder<br>
    <input placeholder="请输入一段文本" class="text">使用伪元素 ::placeholder 的效果
</body>
</html>

代码运行结果如下图所示：

（学习视频分享：web前端入门）

Das obige ist der detaillierte Inhalt vonCSS-Pseudo-Selektor-Lernanalyse von Pseudo-Element-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!