هناك أربع طرق اختيار شائعة الاستخدام،
وهي تحديد قاعدة المعرف، مثل
اقتباس المحتوى
Button#button{}
#urlBar[type="text"] { }
div > p >span#demo{}
اختيار قاعدة الفئة، مثل
اقتباس المحتوى
Button.toolbarButton { }
.fancyText { }
Menuitem > .menu-left[checked="true"] { }
اختيار قاعدة العلامة، مثل
اقتباس المحتوى
td { }
div > p { }
input[ type= "checkbox"] { }
المحددات الموحدة، مثل
المحتوى المرجعي
*
: بعد
[hidden="true"]
تبدأ جميعها في المطابقة من أقصى اليمين حتى نهاية القاعدة بأكملها في أقصى اليسار.
هناك مشكلة، على سبيل المثال، يمكن للقاعدة الموجودة في أقصى اليمين تحديد العنصر الذي تريد تحديده بالفعل.
سيؤدي المزيد من مطابقة القواعد إلى إهدار الأداء.
على سبيل المثال، div > p >span#demo{}
div > p >span لا معنى له على الإطلاق.
التحسين:
المعرفات فريدة من نوعها. ليست هناك حاجة لإرفاق قواعد زائدة عن الحاجة. ويمكن أيضًا مطابقتها بدقة.
اقتباس محتوى
Button#button{} -> #button{}
#urlBar[type="text"] { } -> #urlBar{}
div > p >span#demo{} -> #demo{}
يجب ألا يظهر ما يلي لذا يمكن أيضًا تحسينه.
اقتباس المحتوى
Button.toolbarButton { } -> .toolbarButton{}
يستخدم الكثير من القواعد، فمن الأفضل إعطاء العنصر فئة بشكل مباشر،
على سبيل المثال: div > p >span > a{}
قد يعطي أداءً خاصًا. مجرد كتابة فئة مباشرة.
المواقف الخاصة تتطلب معاملة خاصة.
على سبيل المثال، في بعض الأحيان تحتاج إلى التأكد من أن بنية الصفحة نظيفة. يتم استخدام هذه الطريقة لتلبية احتياجات المراجعات اللاحقة. ومن الممكن أيضا. العثور على الحل الأفضل في التوازن.
استخدم الميراث
#demo .left{text-align:left} ->#demo{text-align:left}
ملاحظة: يتم استخدام XUL في المقالة الأصلية للطلاب الذين لم يتعرضوا لـ XUL، قد تبدو العلامات قليلاً غريب، ولكن ليس من الصعب أن نفهم.