يمكن القول أن دور محددات الفئة الزائفة في CSS حاسم. إذا لم يكن لدى CSS محددات فئة زائفة، فيجب إكمال العديد من التأثيرات بمساعدة js. وهذا لن يؤدي فقط إلى زيادة كمية التعليمات البرمجية، بل سيؤدي أيضًا إلى إنشاء من الصعب الحفاظ عليها. إن عبء العمل الثقيل هذا على المبرمجين يتعارض أيضًا مع غرض CSS، وهو تحسين كفاءة التطوير وإكمال التطوير عالي الجودة في نفس العالم.
تشتمل محددات الفئة الزائفة على محددات كائنات من فئة زائفة وفئة زائفة تستخدم نقطتين (:) كمعرف بادئة. يمكنك إضافة محدد قبل النقطتين لتحديد نطاق تطبيق الفئة الزائفة، وبعد النقطتين توجد أسماء كائنات الفئة الزائفة والفئة الزائفة، ولا توجد مسافات قبل النقطتين وبعدهما، وإلا فسيتم اعتباره محدد الفئة، كما هو موضح في الشكل.
يحتوي الجدول التالي على معظم محددات الفئة الزائفة:
فئة زائفة ديناميكية
تعد الفئات الزائفة الديناميكية نوعًا من الأنماط السلوكية، ولا توجد هذه الأنماط في HTML ولا يمكن أن تنعكس إلا عندما يتفاعل المستخدمون مع الصفحة. تشتمل محددات الفئة الزائفة الديناميكية على شكلين:
فئة Anchor الزائفة، وهو النمط الأكثر شيوعًا في الروابط، مثل:link،:visited.
تسمى الفئات الزائفة للسلوك أيضًا بالفئات الزائفة لعملية المستخدم، مثل:hover، و:active، و:focus.
من أجل البساطة في التدريس، أكتبها على أنها مضمنة. في التطبيقات الفعلية، لا ينصح باستخدامها في السطر.
:وصلة
قم بتعيين نمط الارتباط التشعبي قبل القفز. الاستخدام كما يلي:
<ahref=#target=_blank>اقفز</a>
إذا كنت تريد تعيين النمط قبل الارتباط التشعبي أعلاه ليكون له لون خط أحمر وبدون تسطير، فيمكنك تعيينه على هذا النحو.
:زار
هذه الفئة الزائفة هي عكس :link:link هو النمط الموجود قبل الرابط، و:visited هو النمط الذي يلي الرابط، أي نمط الارتباط التشعبي بعد زيارته.
<ahref=#target=_blank>اقفز</a>:li
في التعلم اليومي، يمكن للجميع كتابة الروابط قبلها وبعدها معًا، وهو أمر مريح وسريع ودلالي؛ وهذا يؤدي إلى عدم معرفة العديد من الطلاب أن هذين الفصلين الزائفين لهما تأثير تغطية. يمكن أن تساعدك الأمثلة التالية في الحصول على فهم عام:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:link{color:red;text-decoration:none;}a:visited{color:green; text-decoration:underline;}</style></head><body><ahref=login.htmltarget=_blank>القفز</a></body></html>الكود أعلاه هو رابط الانتقال من صفحة HTML إلى صفحة تسجيل الدخول، ويكون العرض بعد التشغيل كما يلي:
:تحوم
يتم استخدام محدد الفئة الزائفة :hover لتأثيرات التصميم عندما يقوم المستخدم بتحريك الماوس فوق العنصر. لا يتم استخدامه للارتباطات التشعبية فحسب، بل يمكن تطبيقه أيضًا على العديد من العناصر، مثل الأزرار. عند تحريك الماوس فوقه، ستجد أن لون الخلفية الشمالية للزر يصبح أغمق أو يتغير لونه بالطبع، هناك طرق أخرى لإعداده، ولكن ليس هناك شك: التمرير هو أبسط وأسرع طريقة. سأقدم هنا أولاً تقنيات استخدام الارتباطات التشعبية، ثم قم بتوسيعها واستخدامها لتغيير التأثير بعد تحريك الماوس فوق العنصر.
إذا كنت تريد تغيير لون العنصر عند تحريك الماوس فوق عنصر علامة، يكون الرمز كما يلي:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:hover{color:blue;}</style></head><body><ahref= #target=_blank>القفز</a></body></html> 
يوسع
رمز الهيكل هو كما يلي:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;background:orange ;text-align:center;</style></head><body><div>:hover</div></body></html>عندما يكون التأثير المطلوب هو أنه عندما يتحرك الماوس فوق عنصر div، يتغير لون الخلفية إلى الأسود ويتغير الخط إلى الأبيض، ويكون الكود كما يلي:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;background:orange ;text-align:center;transition:all1s;}div:hover{background:black;color:white;}</style></head><body><div>:hover</div></body>< /أتش تي أم أل>:نشيط
يتم استخدام :active لتأثيرات النمط عندما ينقر المستخدم على عنصر ما. يتم استخدامه في الغالب في عناصر التحكم في النموذج عندما ينقر المستخدم، يكون له تأثير الضغط على الزر. لنفس السبب، أضع هذا في منطقة الامتداد.
عند النقر فوق ارتباط تشعبي، أريد تغيير لون خط الارتباط التشعبي، ويكون رمز التنفيذ كما يلي:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a{color:red;}a:active{color:blue;}</style></head ><body><ahref=#target=_blank>القفز</a></body></html>يوسع
يستخدم هذا المثال div لتقليد الزر. من الصعب وصف نمط الزر الذي يأتي مع HTML في كلمة واحدة، ومن السهل تقليد النمط والتحكم فيه.
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;text-align:center;background :أخضر؛حجم الخط:24px؛وزن الخط:غامق؛نصف قطر الحدود:15px؛الهامش:150pxauto؛المؤشر:مؤشر؛}div:active{background:orange;color:white;}</style></head ><body><div>الزر</div></body></html>:ركز
يتم استخدام :focus لتصميم التأثير عندما يصبح عنصر متعدد الأغراض هو التركيز. وغالبًا ما يستخدم هذا في عناصر التحكم في النموذج.
رمز الهيكل:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title></head><body><formaction=#method=post><inputtype=text></form></ الجسم></html>
عندما تريد التركيز على الإدخال، يكون لون الخلفية هو #CCC، ورمز التنفيذ هو:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>forminput:focus{background:#CCC;}</style></head><body><formaction =#method=post><inputtype=text></form></body></html>يمكنك رؤية تأثير النمط لتغيير لون الخلفية إلى اللون المستهدف بعد التركيز على الإدخال.
أشياء يجب ملاحظتها:
(1) يتبع محدد الفئة الزائفة أعلاه مبدأ الترتيب، وهو الارتباط بالزيارة للتمرير ثم إلى الفئة الزائفة النشطة.
(2) يتم تضمين التمرير والنشاط في الفئة الزائفة لسلوك المستخدم.
الطفل الأول
يمكن أن يتطابق الطفل الأول من الفئة الزائفة مع العنصر الفرعي الأول ضمن العنصر الأصلي المحدد، على سبيل المثال، يمكن أن يطابق ul li:first-child العنصر <li> الأول ضمن العنصر <ul>.
<!DOCTYPEhtml><html><head><style>ulli:first-child{/*طابق أول علامة <li>ضمن <ul>*/color:red;}</style></head>< body> <ul><li>برمجة dotcpp</li><li>برمجة dotcpp</li><li>برمجة dotcpp</li></ul></body></html>نتائج التشغيل:
طفل
على غرار الطفل الأول، يمكن أن يتطابق الطفل الأخير من الفئة الزائفة مع العنصر الفرعي الأخير ضمن العنصر الأصلي المحدد. على سبيل المثال، يمكن أن يطابق ul li:last-child العنصر <li> الأخير ضمن العنصر <ul> رمز العينة هو كما يلي:
<!DOCTYPEhtml><html><head><style>ulli:last-child{/*طابق آخر علامة <li>ضمن <ul>*/color:red;}</style></head><body > <ul><li>برمجة dotcpp</li><li>برمجة dotcpp</li><li>برمجة dotcpp</li></ul></body></html>نتائج التشغيل:
طفل نون
الفئة الزائفة nth-child جديدة في CSS3 ويمكنها مطابقة العنصر الفرعي n ضمن العنصر المحدد، على سبيل المثال، يمكن أن يطابق ul li:nth-child(2) العنصر <li> الثاني ضمن العنصر <ul> رمز العينة كما يلي:
<!DOCTYPEhtml><html><head><style>ulli:nth-child(2){/*طابق علامة <li>الثانية ضمن <ul>*/color:red;}</style></ head> <body><ul><li>برمجة dotcpp </li><li>برمجة dotcpp </li><li>برمجة dotcpp </li></ul></body></html>نتائج التشغيل:
