عناصر نمط HTML مع سمات محددة
فمن الممكن أن أسلوب عناصر HTML التي لها سمات محددة أو قيم السمات.
CSS [سمة] محدد
و [attribute] يستخدم محدد لتحديد العناصر مع سمة محددة.
يحدد المثال التالي عن <a> عناصر ذات سمة الهدف:
CSS [السمة = "قيمة"] محدد
و [attribute="value"] يستخدم محدد لتحديد العناصر مع السمة المحددة والقيمة.
يحدد المثال التالي عن <a> عناصر مع target="_blank" السمة:
CSS [السمة ~ = "قيمة"] محدد
و [attribute~="value"] يستخدم محدد لتحديد العناصر ذات قيمة سمة تحتوي على كلمة محددة.
يحدد المثال التالي جميع العناصر ذات سمة العنوان الذي يحتوي على قائمة مفصولة مساحة من الكلمات، واحد منها هو " flower ":
في المثال أعلاه سوف تتطابق العناصر مع title="flower", title="summer flower" ، و title="flower new" ، ولكن ليس title="my-flower" أو title="flowers" .
CSS [سمة | = "قيمة"] محدد
و [attribute|="value"] يستخدم محدد لتحديد العناصر مع السمة المحددة بدءا من القيمة المحددة.
يحدد المثال التالي جميع العناصر مع قيمة سمة الفئة التي تبدأ مع "top" :
ملاحظة: قيمة يجب أن تكون الكلمة بأكملها، إما وحدها، مثل class="top" ، أو تليها واصلة ( - ) ، مثل class="top-text" !
CSS [سمة ^ = "قيمة"] محدد
و [attribute^="value"] يستخدم محدد لتحديد العناصر التي تبدأ مع القيمة المحددة قيمة السمة.
يحدد المثال التالي جميع العناصر مع قيمة سمة الفئة التي تبدأ مع "top" :
ملاحظة: ليس لدى قيمة أن تكون كلمة بأكملها!
CSS [السمة $ = "قيمة"] محدد
و [attribute$="value"] يستخدم محدد لتحديد العناصر التي تنتهي مع القيمة المحددة قيمة السمة.
يحدد المثال التالي جميع العناصر مع قيمة سمة الفئة التي تنتهي مع "test" :
ملاحظة: ليس لدى قيمة أن تكون كلمة بأكملها!
CSS [سمة * = "قيمة"] محدد
و [attribute*="value"] يستخدم محدد لتحديد العناصر التي تحتوي على قيمة تحديد قيمة السمة.
يحدد المثال التالي جميع العناصر مع قيمة سمة الطبقة التي تحتوي على "te" :
ملاحظة: ليس لدى قيمة أن تكون كلمة بأكملها!
أشكال التصميم
يمكن للمحددات سمة تكون مفيدة لأشكال التصميم دون class أو ID :
مثال
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
} انها محاولة لنفسك » نصيحة: زيارة موقعنا على أشكال CSS دروس لمزيد من الأمثلة على كيفية أسلوب الأشكال مع CSS.
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 » التمرين 6»
المزيد من الأمثلة المغلق المختارون
استخدام لدينا اختبار محدد CSS للتدليل على محددات مختلفة.
للإشارة كاملة لجميع محددات CSS، يرجى زيارة موقعنا المغلق المختارون المرجعي .