في CSS ما هو الفرق بين ". و "#" عند إعلان مجموعة من الأساليب؟

Question

ماهو الفرق بين # و . عند إعلان مجموعة من الأساليب لعنصر وما هي الدلالات التي تدخل في اللعب عند تحديد أي منها؟

Answer 1

نعم ، فهي مختلفة ...

# هو محدد المعرف, تستخدم لاستهداف أ غير مرتبطة عنصر محدد مع معرف فريد ، ولكن. هو محدد الفئة تستخدم لاستهداف مضاعف عناصر مع فئة معينة. بعبارة أخرى:

• #foo {} سوف نمط غير مرتبطة أعلن العنصر بسمات id="foo"
• .foo {} سوف نمط الكل عناصر ذات سمة class="foo" (يمكنك تعيين فئات متعددة لعنصر أيضًا ، فقط افصلها بالمساحات ، على سبيل المثال class="foo bar")

الاستخدامات النموذجية

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

يتم استخدام الفصول الدراسية حيث يتكرر النمط ، على سبيل المثال ، تقول إنك ترأس نموذجًا خاصًا من رأس رسائل الخطأ ، يمكنك إنشاء نمط h1.error {} التي ستنطبق فقط على <h1 class="error">

النوعية

هناك جانب آخر حيث يختلف المحددون في خصوصيتهم - يُعتبر محدد المعرف أكثر تحديداً من محدد الفئة. هذا يعني أنه حيث الأنماط نزاع على عنصر ما ، فإن تلك التي تم تعريفها مع المحدد الأكثر تحديدًا ستتجاوز محددات أقل تحديدًا. على سبيل المثال ، معطى <div id="sidebar" class="box"> أي قواعد ل #sidebar مع تجاوز القواعد المتضاربة ل .box

تعرف على المزيد حول محددات CSS

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

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

Answer 2

ال # يعني أنه يطابق id من عنصر. ال . يدل على اسم الفصل:

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>


#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

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

Answer 3

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

اسم الفصل:

<style>
   .class { ... }
</style>

<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

العنصر المسمى:

<style>
   #name { ... }
</style>

<div id="name"></div>

Answer 4

تجدر الإشارة أيضًا إلى أنه في تتالي, ، و هوية شخصية (#) المحدد أكثر محدد من AB (.) المحدد. لذلك ، ستجاوز القواعد في بيان الهوية القواعد في بيان الفصل.

على سبيل المثال ، إذا كان كل من العبارات التالية:

.headline {
  color:red;
  font-size: 3em;
}

#specials {
  color:blue;
  font-style: italic;
}

يتم تطبيقها على نفس عنصر HTML:

<h1 id="specials" class="headline">Today's Specials</h1>

ال لون أزرق القاعدة سوف تتجاوز لون احمر قاعدة.

Answer 5

بضع امتدادات سريعة حول ما قيل بالفعل ...

و id يجب أن تكون فريدة من نوعها ، ولكن يمكنك استخدام نفس المعرف لجعل أنماط مختلفة أكثر تحديداً.

على سبيل المثال ، بالنظر إلى مستخلص HTML هذا:

<div id="sidebar">
    <h2>Heading</h2>
    <ul class="menu">
        ...
    </ul>
</div>
<div id="content">
    <h2>Heading</h2>
    ...
</div>
<div id="footer">
    <ul class="menu">
        ...
    </ul>
</div>

يمكنك تطبيق أنماط مختلفة مع هذه:

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }

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

<ul class="main menu">...</ul>
<ul class="other menu">...</ul>

الذي يتيح لك الحصول على تصميم مشترك في .menu مع أنماط محددة باستخدام .main.menu و .sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

Answer 6

مثلما ذكر الجميع بالفعل:

فترة (.) يشير إلى صف دراسي, و hash (#) يشير إلى بطاقة تعريف.

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

ستظل صفحة ما إذا كان لديك عناصر متعددة ذات نفس المعرف ، لكنك ستواجه مشكلات إذا/عندما تحاول تحديث العناصر المذكورة ديناميكيًا عن طريق الاتصال بها بمعرفهم ، لأنها ليست فريدة من نوعها.

من المفيد أيضًا ملاحظة أن خصائص المعرف ستتحل محل خصائص الفصل.

Answer 7

.class يستهدف العنصر التالي:

<div class="class"></div>

#class يستهدف العنصر التالي:

<div id="class"></div>

لاحظ أن المعرف يجب أن يكون فريدًا في جميع أنحاء المستند ، في حين أن أي عدد من العناصر قد يشارك فئة.

Answer 8

# هو محدد المعرف. يطابق العناصر فقط مع معرف مطابق. سوف تتطابق قاعدة النمط التالي مع العنصر الذي يحتوي على سمة معرّف ذات قيمة "أخضر":

#green {color: green}

نرى http://www.w3schools.com/css/css_syntax.asp للمزيد من المعلومات

Answer 9

إليكم aproud لشرح قواعد TE .style و #style هي جزء من المصفوفة. أنه إذا لم يكن في الترتيب الصحيح ، فيمكنهم تجاوز بعضهم البعض ، أو التسبب في تعارضات.

هنا هو الخط.

مصفوفة

#style 0,0,1,0 id

.style 0,1,0,0 class

إذا كنت تريد تجاوز هذين ، يمكنك استخدامه <style></style> الساحرة لديها مستوى المصفوفة أو 1,0,0,0.وسيقوم Media Query بتجاوز كل شيء أعلاه ... لست متأكدًا من هذا ولكن أعتقد أن محدد الهوية # لا يمكن استخدامها إلا مرة واحدة في الصفحة.