اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر
table.class

يعني أن الجدول يحتوي على محدد باسم class كما في الشكل التالي 

<table class="class"></table>

أي كل التنسيقات سوف تطبق على كامل الجدول بما أنه يحتوي على هذا المحدد. 

أما 

table .class

يعني أن هناك عنصر بداخل وسم الجدول يحتوي على محدد باسم class  كما في الشكل التالي 

<table>
  <tr class="class"></tr>
</table>

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

  • 0
نشر

عند إستخدام table.class_name فأنت تقوم بإختيار أي جدول لديه نفس الclass وتطبق عليه التنسيق

أما إن قمت بإستخدام table .class_name فأنت تقوم بتطبيق التنسيق على العناصر التي لديها نفس ال class وفي داخدل جدول

<table class="testtbl">
	<div class="testtbl">
<!-- elements-->
        </div>
</table>
      
<style>
  table.testtbl{
  //style
  }
</style>

هذا التنسيق سيتم تطبيقه على الجدول نفسه ولكن لا يتم تطبيقه على الdiv بداخله بينما:

<table class="testtbl">
	<div class="testtbl">
<!-- elements-->
        </div>
</table>
      
<style>
  table .testtbl{
  //style
  }
</style>

سيتم تطبيقه على الdiv وليس على الجدول نفسه

  • 0
نشر

وجود فراغ بين أي محددين في CSS يعني أن المحدد الثاني داخل أبناء المحدد الأول

table .class في مثالك تستهدف أبناء الوسم table الحاوين على الصنف class

table .class {
	...
}
<table>
  <tr class="class" /> <!-- مستهدف -->
  <tr>
    <td>
    	<div class="class">...</div><!-- مستهدف -->
    </td>
  </tr>
</table>

 

عدم وجود فراغ يعني أن العنصر المستهدف بالمحدد الأول يجب أن يحوي نفسه على المحدد الثاني

table.class في مثالك تستهدف أي وسم table يحوي نفسه على الصنف class

table .class {
	...
}
<table class="class"> <!-- مستهدف -->
  ...
</table>

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...