تطبيق نمط CSS على العناصر الفرعية

StackOverflow https://stackoverflow.com/questions/632100

  •  08-07-2019
  •  | 
  •  

سؤال

أريد تطبيق الأنماط فقط على الجدول الموجود داخل DIV بفئة معينة:

ملحوظة:أفضل استخدام محدد CSS للعناصر الفرعية.

لماذا يعمل رقم 1 و لا يعمل رقم 2؟

1:

div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}

2:

div.test th, td, caption {padding:40px 100px 40px 50px;}

لغة البرمجة: 

<html>
    <head>
        <style>
            div.test > th, td, caption {padding:40px 100px 40px 50px;}
        </style>
    </head>
    <body>
        <div>
            <table border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
        <div class="test">
            <table  border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
    </body>
</html>

ما الخطأ الذي افعله؟

هل كانت مفيدة؟

المحلول

هذا الكود "div.test th, td, caption {padding:40px 100px 40px 50px;}"تطبق القاعدة على الجميع th العناصر التي يحتوي عليها أ div عنصر مع فئة اسمه test, ، بالإضافة إلى الجميع td العناصر و الجميع caption عناصر.

إنه ليس مثل "الكل". td, th و caption العناصر التي يحتوي عليها أ div عنصر مع فئة test".لتحقيق ذلك تحتاج إلى تغيير المحددات الخاصة بك:

'>' غير مدعوم بشكل كامل من قبل بعض المتصفحات القديمة (أنا أنظر إليك يا Internet Explorer). 

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

نصائح أخرى

.test * {padding: 40px 100px 40px 50px;}

> href="http://www.w3.org/TR/CSS2/selector.html#descendant-selectors" rel="noreferrer"> محدد مباريات أطفال المباشر فقط، وليس من نسل .

وأنت تريد 

div.test th, td, caption {}

وأو على الأرجح 

div.test th, div.test td, div.test caption {}

وتحرير:

ويقول أول واحد 

  div.test th, /* any <th> underneath a <div class="test"> */
  td,          /* or any <td> anywhere at all */
  caption      /* or any <caption> */

وفي حين أن الثانية تقول 

  div.test th,     /* any <th> underneath a <div class="test"> */
  div.test td,     /* or any <td> underneath a <div class="test"> */
  div.test caption /* or any <caption> underneath a <div class="test">  */

في الخاص بك الأصلي div.test > th يقول any <th> which is a **direct** child of <div class="test">، وهو ما يعني أنها ستكون مباراة <div class="test"><th>this</th></div> لكن لن تتطابق <div class="test"><table><th>this</th></table></div>

إذا كنت ترغب في إضافة النمط في كل طفل ولا مواصفات علامة HTML ثم استخدامه.

والوالد العلامة div.parent

العلامة الطفل داخل div.parent مثل <a>، <input>، <label> الخ.

ورقمه: div.parent * {color: #045123!important;}

ويمكنك أيضا إزالة المهم، وليس مطلوبا

وهنا بعض التعليمات البرمجية التي كتبت مؤخرا. أعتقد أنه يقدم شرحا الأساسي الجمع بين أسماء فئة / ID مع pseudoclasses. 

.content {
  width: 800px;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 5px 2px grey;
  margin: 30px auto 20px auto;
  /*height:200px;*/

}
p.red {
  color: red;
}
p.blue {
  color: blue;
}
p#orange {
  color: orange;
}
p#green {
  color: green;
}
<!DOCTYPE html>
<html>

<head>
  <title>Class practice</title>
  <link href="wrench_favicon.ico" rel="icon" type="image/x-icon" />
</head>

<body>
  <div class="content">
    <p id="orange">orange</p>
    <p id="green">green</p>
    <p class="red">red</p>
    <p class="blue">blue</p>
  </div>
</body>

</html>

div.test td, div.test caption, div.test th

ويعمل بالنسبة لي.

وومحدد الطفل> لا يعمل في IE6.

وبقدر ما أعرف أن هذا: 

div[class=yourclass] table {  your style here; }

وأو في قضيتك حتى هذا: 

div.yourclass table { your style here; }

(ولكن هذا سوف تعمل من العناصر مع yourclass التي قد لا تكون divs) سوف تؤثر على الجداول فقط داخل yourclass. وكما يقول كين، و> غير معتمد في كل مكان (وdiv[class=yourclass] جدا، وذلك باستخدام ترميز النقطة لفئات).

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top