كيفية الجمع بين class و ID في محدد CSS?
-
06-07-2019 - |
سؤال
إذا كان لدي التالية div:
<div class="sectionA" id="content">
Lorem Ipsum...
</div>
هل هناك طريقة لتحديد النمط الذي يعبر عن فكرة "شعبة مع id='content'
و class='myClass'
"?
أو هل لديك ببساطة الذهاب بطريقة أو بأخرى كما في
<div class="content-sectionA">
Lorem Ipsum...
</div>
أو
<div id="content-sectionA">
Lorem Ipsum...
</div>
المحلول
في ورقة الأنماط الخاصة بك:
div#content.myClass
تحرير:هذه قد تساعد أيضا:
div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */
و في المثال الخاص بك:
div#content.sectionA
تحرير 4 سنوات: لأن هذا هو السوبر القديم و الناس تبقى العثور عليه: لا استخدام tagNames في محددات. #content.myClass
هو أسرع من div#content.myClass
لأن tagName يضيف تصفية الخطوة التي لا تحتاج. استخدام tagNames في محددات فقط حيث يجب!
نصائح أخرى
وهناك اختلافات بين #header .callout
و#header.callout
في المغلق.
وهنا هو "سهل الانجليزية" من #header .callout
:
تحديد كافة العناصر مع اسم الفئة callout
التي ينحدرون من العنصر بمعرف header
.
و#header.callout
يعني:
حدد العنصر الذي لديه معرف header
وكذلك اسم فئة من callout
.
ويمكنك قراءة المزيد هنا الحيل المغلق
وحسنا بوجه عام يجب أن لا حاجة لتصنيف عنصر المحدد من قبل الهوية، لأن الهوية هي دائما فريدة من نوعها، ولكن إذا كنت حقا بحاجة إلى ذلك، يجب أن تعمل ما يلي:
div#content.sectionA {
/* ... */
}
وهناك شيء خاطئ مع الجمع بين الهوية وفئة على عنصر واحد، ولكن يجب أن لا حاجة إلى التعرف عليه من قبل كل من لقاعدة واحدة. إذا كنت تريد حقا أن يمكنك القيام به:
#content.sectionA{some rules}
وأنت لا تحتاج إلى div
أمام ID كما فعل آخرون اقترحوا.
في عام، قواعد CSS محددة لهذا العنصر يجب تعيين مع الهوية، وتلك هي الذهاب الى تحمل وزنا أكبر من تلك التي فقط الطبقة. أن قواعد المحددة من قبل الطبقة يكون الخصائص التي تنطبق على العناصر المتعددة التي كنت لا تريد تغيير في أماكن متعددة في أي وقت تحتاج إلى ضبط.
وهذا يتلخص هذا:
.sectionA{some general rules here}
#content{specific rules, and overrides for things in .sectionA}
تأكد معنى؟
أنت <م> يمكن م> الجمع بين الهوية وفئة في CSS، ولكن المقصود معرفات لتكون فريدة من نوعها، وذلك إضافة إلى الطبقة محدد CSS أن الإفراط في التأهل ذلك.
والاستخدام:. tag.id ; tag#class
in المتغيرات العلامة في المغلق الخاص بك
ومعرفات ليكون وثيقة فريدة من نوعها على نطاق واسع، لذلك يجب أن لا يكون لتحديد القائمة على حد سواء. يمكنك تعيين عنصر فئات متعددة ولكن مع class="class1 class2"
أعتقد أنك خاطئ.معرفات مقابل فئة ليست مسألة النوعية ؛ لديهم مختلف تماما المنطقي يستخدم.
معرفات ينبغي أن تستخدم لتحديد أجزاء معينة من الصفحة:رأس, شريط التنقل, المادة الرئيسية ، المؤلف ، تذييل الصفحة.
دروس عن كيفية استخدام الأساليب إلى الصفحة.دعونا نقول لديك العامة موقع المجلة.كل صفحة على الموقع سوف يكون نفس العناصر-رأس, الملاحة, المادة الرئيسية, الشريط الجانبي أو تذييل الصفحة.ولكن المجلة أقسام مختلفة--الاقتصاد, الرياضة, الترفيه.تريد ثلاثة أقسام قد تبدو مختلفة--الاقتصاد المحافظة ساحة العمل الرياضي-y, تسلية مشرق و الشباب.
يمكنك استخدام فئات لهذا.كنت لا تريد أن تجعل الهويات المتعددة.#الاقتصاد-المادة و #الرياضة-المادة و #الترفيه-المادة.هذا لا معنى له.بدلا من ذلك, يمكنك تحديد ثلاثة فصول .الاقتصاد والرياضة .الترفيه ، ثم تحديد #nav, #المادة ، #تذييل معرفات لكل منها.
.sectionA[id='content'] { color : red; }
ولن تعمل عند نوع المستند هو أتش تي أم أل 4.01 الرغم من ...