ما هي الأولويات بين محددات CSS؟

Question

سؤال CSS:إذا تم تطبيق محددين مختلفين على عنصر ما، فمن يفوز؟

أعلم أن هذا لا ينبغي أن يحدث، ولكني أريد تعديل تطبيق قديم، وCSS في المنتصف.

Answer 1

ال تفاصيل دموية في المواصفات هي في الواقع قابلة للقراءة بشكل معقول.في ملخص:

1. !important القواعد ومضمنة style القواعد تفوز أكثر.

2. خلاف ذلك، عادة ما يفوز أكثر تحديدا. #id هو محدد أكثر تحديدا من .classname هو محدد أكثر تحديدا من tagname.

3. عندما تكون القواعد محددة بنفس القدر، فإن الشخص الذي تم الإعلان عنه هو الأخير.

لا يوجد سبب محدد لماذا "لا ينبغي أن يحدث".من الطبيعي تحديد قاعدة عريضة ثم إضافة قاعدة أكثر تحديدًا لاستهداف حالة واحدة؛قواعد الملكية نفسها المتعددة على عنصر واحد ليست غير عادية أو غير مرغوب فيها.

Answer 2

وعليك أن تجد # لا توجد لمعرف = A، # لا من الدرجة = B و# لا توجد العلامة = ج في محدد

ABC مع انتصارات قيمة أعلى.

.wrapper .title  p {  
  //some other rules
}

A=0 B=2 C=1 =021

\#foo {
  // some more rules
}

A=1 = 100

.bar .head div li{
  // some more rules
}


A=0 B=2 C=2 =022

100> 022> 021

وهكذا انتصارات #foo

Answer 3

وينبغي أن يحدث! هذا هو السبب في انه دعا أوراق الأنماط المتتالية. يمكنك العثور على مثال على أولويات هنا

Answer 4

وانظر rel="nofollow أجل خصوصية في مواصفات (جنبا إلى جنب مع ما تبقى من هذا الفصل أيضا! القواعد الهامة والنظام تظهر القواعد في أنماط لها تأثير أيضا).

Answer 5

"#id" أقوى من اسم ".class" و".class" أقوى من اسم "tag".لكن إذا طبقنا "!مهم" فإن أولويته تكون لأغلبهم.

• !مهم
• نمط مضمن
• بطاقة تعريف
• فصل
• بطاقة شعار

Answer 6

ويتم التحكم في الأولوية بين محددات قبل كيف محددة هم. فوز محددات أكثر تحديدا على أقل تحديدا.

إذا اثنين من محددات محددة على قدم المساواة، في وقت لاحق واحد يفوز على أول واحد.

وهناك ثلاثة مستويات من الدقة، والهوية، والطبقة والعنصر. حتى #elem يفوز على .elem باعتبارها هوية أكثر تحديدا. .elem .cont يفوز على .elem كما انها لديها اكثر محددات على نفس المستوى.

اقرأ المزيد تحت عنوان "ماذا يحدث عند حدوث تعارضات؟" في Selectutorial .

Answer 7

وترتيب في ملف CSS المسائل إلا إذا تتقاسم المنتخبات نفس النوعية.

لمزيد من المعلومات حول خصوصية محدد: أندي كلارك تحده خصوصية الحروب والذي هو أفضل محة عامة عن كيفية عملها.

Answer 8

CSS تعني المتتالية أوراق الأنماط.وهذا يعني أن القواعد تنطبق على العناصر بطريقة متتالية.من الطبيعي تمامًا أن يتم تطبيق محددات مختلفة على عنصر ما.يفكر، على سبيل المثال، في ما يلي:

<div class="wrapper">
  <div id="foo" class="bar" style="some rules">Test</div>
</div>

ستؤثر القواعد التالية على عنصر "foo":

.wrapper {
  //some other rules
}

#foo {
  // some more rules
}

.bar {
  // some more rules
}

يمكن العثور على قواعد للأولويات هنا.

أنصح دائمًا باستخدام Firefox "الحشرة النارية" توصيل في.سيُظهر لك بالضبط الخصائص التي يتم تقييمها لعنصر معين ولماذا، مع التركيز على التجاوزات أثناء التتالي.

Answer 9

1. !مهم
2. نمط مضمن
3. #بطاقة تعريف
4. فصل
5. بطاقة شعار