ما هي الزائفة الطبقات؟
ويستخدم فئة مزيفة لتحديد حالة خاصة من عنصر.
على سبيل المثال، يمكن استخدامه ل:
- أسلوب عنصر عندما يصطاد الفئران المستخدم أكثر من ذلك
- أسلوب زار والتي لم تتم زيارتها وصلات مختلفة
- أسلوب عنصر عندما يحصل التركيز
الماوس فوق عني
بناء الجملة
بناء جملة الزائفة فئات هي:
selector:pseudo-class {
property:value;
}مرساة الزائفة الطبقات
وصلات يمكن عرضها بطرق مختلفة:
مثال
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
انها محاولة لنفسك »  | ملاحظة: a:hover يجب أن تأتي بعد a:link و a:visited ! في تعريف CSS من أجل أن تكون فعالة a:active يجب أن تأتي بعد a:hover في تعريف CSS لكي تكون فعالة!أسماء فئة مزيفة ليست حساسة لحالة الأحرف. |
|---|
الزائفة الطبقات وفئات CSS
الطبقات الزائفة يمكن الجمع بين الطبقات CSS:
عندما كنت تحوم فوق الارتباط الموجود في المثال، فإنه سيتم تغيير اللون:
تحوم على <div>
مثال على استخدام :hover فئة مزيفة على <div> العنصر:
CSS - و :first-child الزائفة من الدرجة
و :first-child الزائفة من الدرجة مباريات عنصر محدد وهذا هو الطفل الأول لعنصر آخر.
مباراة أول <p> عنصر
في المثال التالي، محدد مع أي <p> العنصر الذي هو الطفل الأول من أي عنصر:
تطابق الأولى <i> عنصر في كل <p> العناصر
في المثال التالي، محدد يطابق أول <i> عنصر في كل <p> عناصر هي:
تتطابق مع كل <i> العناصر في جميع الأطفال الأول <p> العناصر
في المثال التالي، محدد مباريات فقط <i> العناصر في <p> العناصر التي هي أول طفل من عنصر آخر:
CSS - و :lang الزائفة من الدرجة
و :lang الزائفة من الدرجة تسمح لك لتحديد القواعد الخاصة للغات مختلفة.
في المثال التالي، :lang يحدد علامات الاقتباس ل <q> العناصر مع lang="no" :
مثال
<html>
<head>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
انها محاولة لنفسك » 
المزيد من الأمثلة
إضافة أنماط مختلفة إلى الارتباطات التشعبية
يوضح هذا المثال كيفية إضافة أنماط أخرى إلى الارتباطات التشعبية.
استخدام :focus
يوضح هذا المثال كيفية استخدام :focus على مستوى الزائفة.
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4»
جميع فئات 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> عنصر مع قيمة السمة انج تبدأ ب "ذلك" |
| :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 | يختار كل الروابط زار |
كل CSS الزائفة عناصر
| منتخب | مثال | وصف المثال |
|---|---|---|
| ::after | p::after | إدراج المحتوى بعد كل <p> عنصر |
| ::before | p::before | إدراج المحتوى قبل كل <p> عنصر |
| ::first-letter | p::first-letter | يختار الحرف الأول من كل <p> عنصر |
| ::first-line | p::first-line | يختار السطر الأول من كل <p> عنصر |
| ::selection | p::selection | يختار جزء من عنصر الذي تم تحديده من قبل المستخدم |