العناصر المزيفة CSS (العناصر المزيفة)

CSS Pseudo-elements 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。注意：与伪元素比较，pseudo-classes(伪类) 能够根据状态改变元素样式。

CSS伪元素是一种样式化文档元素的方法，这些元素没有由文档树中的位置明确定义。

什么是伪元素

CSS伪元素允许您设置元素或元素部分的样式，而无需向其添加任何ID或类。当您只想为段落的第一个字母设置样式以创建首字下沉效果，或者只想通过样式表在元素之前或之后插入一些内容等情况下，这将非常有用。

CSS3 为伪元素引入了新的双冒号（::）语法，以区分伪元素和伪类。伪元素的新语法可以通过以下方式给出：

这些是以下最常用的伪元素：

::first-line 第一行伪元素

该::first-line伪元素应用特殊的样式添加到文本的第一行。

以下示例中的样式规则设置了段落中第一行文本的格式。第一行的长度取决于浏览器窗口或包含元素的大小。

p::first-line　{
　　　　color: #ff0000;
　　　　font-variant:　small-caps;
}

:: first-letter伪元素

::first-letter伪元素用于将特殊的样式添加到文本的第一行的第一个字母。以下示例中的样式规则设置文本段落的首字母格式，并创建类似首字下沉的效果。

p::first-letter　{
　　　　color: #ff0000;
　　　　font-size: xx-large;
}

:: before و :: after الصناعي

يمكن استخدام صناعي ::before و ::after ل插入 المحتوى المولد قبل أو بعد محتوى العنصر. content عند استخدام خصائص CSS مع هذه الصناعي، يتم إدراج المحتوى المولد.

هذا مفيد جدًا لزينة العناصر المليئة بالمحتوى، التي لا يجب أن تكون جزءًا من العلامة الفعلية للصفحة. يمكنك استخدام هذه الصناعي لإدراج 字符串 عادية أو تعيين موضوعات (مثل الصور) وأصول أخرى.

h1::before　{
　　　　content: url("images/marker-left.gif");
}
h1::after　{
　　　　content: url("images/marker-right.gif");
}

الصناعي و الصنف CSS

عادةً، نحتاج فقط إلى استخدام هذه الصناعي لتحديد بعض النصوص في فقرة أخرى أو لتحديد نص معينمستوىنمط العنصر. حيث، إذا تم إعلان صنف لصناعي، فإنه يبدأ العمل. يمكن للصناعي أن يتم دمجه معصنف CSSالدمج لتحقيق التأثير، خاصة للعناصر التي تحتوي على هذا الصنف.

ستعرض القواعد النمطية في هذا المثال جميع الأحرف الأولى للفقاعات class="article" بلون أخضر، حجم xx-large.

p.article::first-letter　{
　　　　color: #00ff00;
　　　　font-size: xx-large;
}