ما الفرق بين معرف وفئة؟

Question

ما الفرق بين <div class=""> و <div id=""> عندما يتعلق الأمر CSS؟ هل هو بخير للاستخدام <div id="">?

أرى مطورو مختلفين يقومون بذلك بطرقتين، وبما أنني تدرس نفسي، فلن أحسب ذلك حقا.

Answer 1

ids يجب أن تكون فريدة من نوعها class يمكن تطبيقها على أشياء كثيرة. في CSS، idتبدو وكأنها #elementID و class تبدو العناصر كما .someClass

بشكل عام، استخدم id كلما أردت الرجوع إلى عنصر معين و class عندما يكون لديك عدد من الأشياء التي كلها على حد سواء. على سبيل المثال، شائعة id العناصر هي أشياء مثل header, footer, sidebar. وبعد مشترك class العناصر هي أشياء مثل highlight أو external-link.

إنها لفكرة جيدة أن تقرأ على Cascade وفهم الأسبقية المخصصة لمخدمات مختلفة: http://www.w3.org/tr/css2/cascade.html.

السبب الأساسي الذي يجب أن تفهمه، ومع ذلك، هو ذلك id محددات تأخذ الأسبقية class محددات. إذا كان لديك هذا:

<p id="intro" class="foo">Hello!</p>

و:

#intro { color: red }
.foo { color: blue }

النص سيكون أحمر لأن id تحديد الأسبقية على class محدد.

Answer 2

ربما يكون التشبيه يساعد في فهم الفرق:

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

طالب علم هوية شخصية البطاقات متميزة. لن يكون هناك طالبان في الحرم الجامعي نفس الطالب هوية شخصية بطاقة. ومع ذلك، يمكن للطلاب العديد من الطلاب وسيشاركوا واحدة على الأقل فصل مع بعض.

لا بأس أن تضع عدة طلاب تحت واحد فصل العنوان، مثل علم الأحياء. لكن من غير المقبول أبدا وضع عدة طلاب تحت طالب واحد هوية شخصية.

عند إعطاء قواعد عبر نظام الاتصال الداخلي المدرسة، يمكنك إعطاء قواعد إلى أ فصل:

"غدا، كل الطلاب يرتدون قميص أحمر لفئة علم الأحياء".

.Biology {
  color: red;
}

أو يمكنك إعطاء قواعد لطالب معين، من خلال الاتصال به الفريد هوية شخصية:

"جوناثان سامبسون هو ارتداء قميص أخضر غدا."

#JonathanSampson {
  color: green;
}

في هذه الحالة، يتلقى Jonathan Sampson أوامرين: واحد كطالب في فئة البيولوجيا، وآخر بمثابة متطلبات مباشرة. لأن جوناثان قيل مباشرة، عبر سمة المعرف، لارتداء قميص أخضر، وسوف يتجاهل الطلب السابق لارتداء قميص أحمر.

فوز محددات أكثر تحديدا.

Answer 3

حيث لاستخدام معرف مقابل فئة

الفرق البسيط بين الاثنين هو أنه في حين يمكن استخدام فئة مرارا وتكرارا على صفحة، يجب استخدام معرف مرة واحدة فقط لكل صفحة. لذلك، من المناسب استخدام معرف في عنصر DIV الذي يميز المحتوى الرئيسي على الصفحة، حيث سيكون هناك فقط قسم محتوى رئيسي واحد فقط. على النقيض من ذلك، يجب عليك استخدام فئة لإعداد ألوان صف بالتناوب على جدول، لأنها بحكم التعريف ستستخدم أكثر من مرة.

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

Answer 4

يجب أن يكون معرف فريد من نوعه في الصفحة بأكملها.

قد ينطبق الفصل على العديد من العناصر.

في بعض الأحيان، من الجيد استخدام معرفات المعرفات.

في الصفحة، عادة ما يكون لديك تذييل واحد، رأس واحد ...

ثم قد يكون التذييل في حصة مع معرف

u003Cdiv id="footer" class="..." style=";text-align:right;direction:rtl">

ولا يزال لديك فئة

Answer 5

أ صف دراسي يجب أن تستخدم لعناصر متعددة تريد نفس التصميم. أ هوية شخصية يجب أن يكون لعنصر فريد. انظر الى هذا الدورة التعليمية.

يجب أن تشير إلى معايير W3C. إذا كنت تريد أن تكون متوافقة صارم، أو إذا كنت تريد أن تكون صفحاتك التحقق من صحة إلى المعايير.

Answer 6

معرفات فريدة من نوعها. الفصول ليست كذلك. يمكن أن تحتوي العناصر أيضا على فصول متعددة. كما يمكن إضافة الفصول ديناميكيا وإزالتها إلى عنصر.

في أي مكان يمكنك استخدام معرف يمكنك استخدام فئة بدلا من ذلك. والعكس ليس صحيحا.

يبدو أن الاتفاقية هي استخدام معرفات عناصر الصفحات الموجودة في كل صفحة (مثل "Navbar" أو "القائمة") وفئات كل شيء آخر ولكن هذه الاتفاقية فقط وستجد تباين واسع في الاستخدام.

هناك اختلاف آخر هو أنه لعناصر مدخلات النموذج، <label> يشير العنصر إلى حقل عن طريق معرف بحيث تحتاج إلى استخدام معرفات إذا كنت ستستخدم <label>. وبعد هو شيء إمكانية الوصول ويمكنك حقا استخدامه.

في السنوات التي مرت بها معرفات مفضلة أيضا لأنها يمكن الوصول إليها بسهولة في جافا سكريبت (GetelementByid). مع ظهور جيس وأطر JavaScript الأخرى، فإن هذه ليست مشكلة غير محددة الآن.

Answer 7

الفصول هي مثل الفئات. يمكن أن تنتمي العديد من عناصر HTML إلى فئة، ويمكن أن يكون لعنصر HTML أكثر من فئة واحدة. يتم استخدام الفصول الدراسية لتطبيق الأساليب أو الأنماط العامة التي يمكن تطبيقها عبر عناصر HTML متعددة.

معرفات هي معرفات. انهم فريدة من نوعها؛ لا يسمح لأي شخص آخر بالحصول على نفس المعرف. تستخدم المعرفات لتطبيق أنماط فريدة من نوعها لعنصر HTML.

أنا استخدم معرفات وفصول في هذه الأزياء:

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

في هذا المثال، يمكن تصريح أقسام الرأس والمحتوى عبر #HEADER و # Ocontent. يمكن تطبيق كل قسم من المحتوى أسلوبا مشتركا من خلال # Orderent. فقط للركلات، أضفت فئة "خاصة" للقسم الأوسط. افترض أنك تريد قسم معين أن يكون لديك تصفيف خاص. يمكن تحقيق ذلك مع الفئة الأصلية، ومع ذلك، لا يزال القسم لا يرث الأنماط المشتركة من # Ordent.

عندما أقوم بتطوير JavaScript أو CSS، عادة ما تستخدم معرفات الوصول إلى عنصر HTML محددة للغاية، واستخدم الفصول الدراسية للوصول إلى / تطبيق الأنماط إلى مجموعة واسعة من العناصر.

Answer 8

CSS هو وجوه موجهة. معرف يقول المثال، فئة يقول الفصل.

Answer 9

يسمح مساحة محدد CSS في الواقع بأسلوب معرف مشروط:

h1#my-id {color:red}
p#my-id {color:blue}

سوف تجسد كما هو متوقع. لماذا ستفعل هذا؟ في بعض الأحيان يتم إنشاء معرفات ديناميكيا، وما إلى ذلك. كان الاستخدام الإضافي لتقديم العناوين بشكل مختلف بناء على تعيين معرف رفيع المستوى:

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

شخصيا، أفضل محدد

body#list-page .title-block > h1 {font-size:56px}

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

أخيرا، عندما يتعلق الأمر بالأداء والأسرع المحدد، يميل المعرف إلى الفوز به. هذا موضوع آخر كامل.

Answer 10

عند تطبيق CSS، قم بتطبيقه على فئة ومحاولة تجنب قدر الإمكان حتى معرف. يجب استخدام المعرف فقط في JavaScript لجلب العنصر أو لأي تجليد حدث.

يجب استخدام الفصول لتطبيق CSS.

في بعض الأحيان يجب عليك استخدام الفصول الدراسية ملزمة الحدث. في مثل هذه الحالات، حاول تجنب الطبقات التي يتم استخدامها لتطبيق CSS وإضافة فئات جديدة لا تحتوي على CSS المقابلة. سيأتي هذا للمساعدة عندما تحتاج إلى تغيير CSS لأي فئة أو تغيير اسم فئة CSS جميعا معا لأي عنصر.

Answer 11

يمكن أن يكون لأي عنصر فئة أو معرف.

يتم استخدام فئة للإشارة إلى نوع معين من الشاشة، على سبيل المثال، قد يكون لديك فئة CSS للحف التي تمثل الإجابة على هذا السؤال. نظرا لوجود العديد من الإجابات، ستحتاج Divs متعددة إلى نفس التصميم وسيستخدم فئة.

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

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

Answer 12

فئة هي لتطبيق أسلوبك على مجموعة من العناصر. تنطبق أنماط الهوية على العنصر فقط مع هذا المعرف (يجب أن يكون هناك واحد فقط). عادة ما تستخدم الفصول الدراسية، ولكن إذا كان هناك لمرة واحدة، فيمكنك استخدام معرفات (أو مجرد عصا النمط مباشرة في العنصر).

Answer 13

في التنمية المتقدمة هوية شخصيةيمكننا استخدام جافا سكريبت في الأساس.

لأغراض قابلة للتكرار، صف دراسيوفاق يأتي مفيد خلاف هوية شخصيةمن المفترض أن تكون فريدة من نوعها.

فيما يلي مثال يوضح التعبيرات أعلاه:

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

الآن يمكنك أن ترى هنا box و box1 هما (2) مختلفة <div> عناصر، ولكن يمكننا تطبيق box و bg-color-red فصول إلى كل منهما.

المفهوم هو الميراث في ابق لغة.

Answer 14

1) معرف DIV غير قابل لإعادة الاستخدام ويجب تطبيقه فقط على عنصر واحد من HTML أثناء إضافة فئة DIV إلى عناصر متعددة.

2) معرف له أهمية أكبر إذا تم تطبيق كلاهما على نفس العنصر ويتم تطبيق أنماط المعرف المتضاربة.

3) عنصر نمط يحيل دائما فئة DIV عن طريق وضع أ. (DOT) أمام أسمائهم بينما تتم إحالة فئة ID DIV عن طريق وضع # (Hash) أمام أسمائهم.

4) مثال: -

فئة في <style> إعلان - .red-background { background-color: red; }

معرف في <style> إعلان - #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div>هنا ستكون الخلفية باللون الأزرق