ما هي الزائفة عناصر؟
ويستخدم CSS الزائفة عنصر إلى النمط المحدد أجزاء من عنصر.
على سبيل المثال، يمكن استخدامه ل:
- أسلوب الحرف الأول، أو خط، عنصر
- إدراج المحتوى من قبل، أو بعد، ومحتوى عنصر
بناء الجملة
بناء جملة-عناصر الزائفة:
selector::pseudo-element {
property:value;
} | لاحظ القولون تدوين مزدوج - ::first-line مقابل :first-line استبدال القولون ضعف تدوين القولون واحد من خلال عناصر الزائفة في CSS3. وكانت هذه محاولة من W3C للتمييز بين الزائفة الطبقات والعناصر الزائفة. وقد استخدم بناء الجملة القولون واحد لكلا الزائفة الطبقات والعناصر الزائفة في CSS2 وCSS1. للتوافق مع الإصدارات السابقة، بناء جملة القولون واحد هو مقبول لCSS2 وCSS1 الزائفة العناصر. |
|---|
و ::first-line الزائفة عنصر
و ::first-line يستخدم الزائفة عنصر لإضافة نمط خاص إلى السطر الأول من النص.
تنسيقات المثال التالي السطر الأول من النص في كل <p> عناصر هي:
ملاحظة: ::first-line لا يمكن إلا الزائفة عنصر تطبيقها لمنع على مستوى العناصر.
تنطبق الخصائص التالية إلى ::first-line الزائفة العنصر:
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
و ::first-letter الزائفة عنصر
و ::first-letter يستخدم الزائفة عنصر لإضافة نمط خاص إلى الحرف الأول من النص.
تنسيقات المثال التالي الحرف الأول من النص في كل <p> عناصر هي:
ملاحظة: ::first-letter لا يمكن إلا الزائفة عنصر تطبيقها لمنع على مستوى العناصر.
تنطبق الخصائص التالية إلى ::first-letter pseudo- العنصر:
- font خصائص
- color خصائص
- background خصائص
- margin الخصائص
- padding خصائص
- border خصائص
- text-decoration
- vertical-align (إلا إذا "float" هو "none" )
- text-transform
- line-height
- float
- clear
شبه عناصر وفئات CSS
، عناصر الزائفة يمكن الجمع بين الطبقات CSS:
في المثال أعلاه سيتم عرض الحرف الأول من الفقرات مع class="intro" ، في اللون الاحمر وحجم أكبر.
الزائفة عناصر متعددة
ويمكن أيضا أن عدة عناصر، الزائفة تكون مجتمعة.
في المثال التالي، فإن الحرف الأول من الفقرة باللون الأحمر، في حجم الخط-XX كبير. وبقية السطر الأول باللون الأزرق، وفي والقبعات الصغيرة. فإن بقية الفقرة أن يكون حجم الخط الافتراضي ولون:
مثال
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
} انها محاولة لنفسك » CSS - و ::before الزائفة عنصر
و ::before الزائفة عنصر يمكن أن تستخدم لادخال بعض المحتويات قبل محتوى عنصر.
إدراج المثال التالي صورة قبل محتوى كل <h1> العنصر:
CSS - و ::after الزائفة عنصر
و ::after الزائفة عنصر يمكن أن تستخدم لادخال بعض المحتوى بعد محتوى عنصر.
إدراج المثال التالي صورة بعد محتوى كل <h1> العنصر:
CSS - و ::selection الزائفة عنصر
و ::selection الزائفة عنصر يطابق جزء من عنصر الذي تم تحديده من قبل المستخدم.
خصائص CSS التالية يمكن تطبيقها على ::selection : color ، background ، cursor ، و outline .
المثال التالي يجعل أحمر النص المحدد على خلفية صفراء:
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 »
كل CSS الزائفة عناصر
| منتخب | مثال | وصف المثال |
|---|---|---|
| ::after | p::after | إدراج شيء بعد محتوى كل عنصر <P> |
| ::before | p::before | إدراج شيء قبل محتوى كل <p> عنصر |
| ::first-letter | p::first-letter | يختار الحرف الأول من كل <p> عنصر |
| ::first-line | p::first-line | يحدد السطر الأول من كل <p> عنصر |
| ::selection | p::selection | يختار جزء من عنصر الذي تم تحديده من قبل المستخدم |
جميع فئات CSS الزائفة
| منتخب | مثال | وصف المثال |
|---|---|---|
| :active | a:active | يختار صلة نشطة |
| :checked | input:checked | يختار كل فحص <input> العنصر |
| :disabled | input:disabled | يختار كل المعوقين <input> العنصر |
| :empty | p:empty | يختار كل <p> العناصر التي ليس لديها أطفال |
| :enabled | input:enabled | يختار كل تمكين <input> العنصر |
| :first-child | p:first-child | يختار كل <p> العناصر التي هو الطفل الأول من الأم |
| :first-of-type | p:first-of-type | يختار كل <p> العنصر الذي هو أول <p> عنصر من الأم |
| :focus | input:focus | يختار <input> العنصر الذي عليه التركيز |
| :hover | a:hover | يختار الروابط على الماوس فوق |
| :in-range | input:in-range | يختار <input> عناصر بقيمة ضمن نطاق محدد |
| :invalid | input:invalid | تحديد كافة <input> العناصر مع قيمة غير صالحة |
| :lang(language) | p:lang(it) | يختار كل <p> عنصر مع قيمة السمة انج تبدأ ب "it" |
| :last-child | p:last-child | يختار كل <p> العناصر التي هي آخر طفل من الأم |
| :last-of-type | p:last-of-type | يختار كل <p> العنصر الذي هو آخر <p> عنصر من الأم |
| :link | a:link | تحديد كافة الروابط التي لم تتم زيارتها |
| :not(selector) | :not(p) | يختار كل عنصر ليس <p> عنصر |
| :nth-child(n) | p:nth-child(2) | يختار كل <p> العنصر الذي هو الطفل الثاني من الأم |
| :nth-last-child(n) | p:nth-last-child(2) | يختار كل <p> العنصر الذي هو الطفل الثاني من الأم، عد من آخر طفل |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | يختار كل <p> العنصر الذي هو ثاني <p> عنصر من الأم، عد من آخر طفل |
| :nth-of-type(n) | p:nth-of-type(2) | يختار كل <p> العنصر الذي هو ثاني <p> عنصر من الأم |
| :only-of-type | p:only-of-type | يختار كل <p> العنصر الذي هو الوحيد <p> عنصر من الأم |
| :only-child | p:only-child | يختار كل <p> العنصر الذي هو الطفل الوحيد من الأم |
| :optional | input:optional | يختار <input> العناصر مع أي "required" سمة |
| :out-of-range | input:out-of-range | يختار <input> عناصر بقيمة خارج النطاق المحدد |
| :read-only | input:read-only | يختار <input> العناصر مع "readonly" السمة المحددة |
| :read-write | input:read-write | يختار <input> العناصر مع أي "readonly" السمة |
| :required | input:required | يختار <input> العناصر مع "required" السمة المحددة |
| :root | root | يختار العنصر الجذر الوثيقة |
| :target | #news:target | يختار النشط الحالي #news عنصر (النقر على عنوان URL يحتوي هذا الاسم مرساة) |
| :valid | input:valid | تحديد كافة <input> العناصر مع قيمة صالحة |
| :visited | a:visited | يختار كل الروابط زار |