ใช้สไตล์ CSS กับองค์ประกอบย่อย

232

ฉันต้องการใช้สไตล์เฉพาะกับตารางใน DIV กับคลาสเฉพาะ:

หมายเหตุ: ฉันต้องการใช้ css-selector สำหรับองค์ประกอบของเด็ก

ทำไม # 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:

<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>

ผมทำอะไรผิดหรือเปล่า?

css css-selectors

— ม. โรมัน
แหล่งที่มา

อย่าลืมว่าตัวเลือก>, + และ [] ไม่พร้อมใช้งานสำหรับ IE6 และรุ่นต่ำกว่า

— Erick

309

รหัสนี้ " 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;
}

— เคนบราวนิ่ง
แหล่งที่มา

มีวิธีใดบ้างในการเขียน div.test 3 ครั้งขึ้นไป?

— โรมัน m

2

@rm Nope มีการทำรังไม่มีกฎหรือ 'กับ' ชนิดจัดกลุ่มเป็น

— sblundy

2

@romanm มีวิธีเขียนเป็น 'div.test' 3 ครั้ง! ดูการใช้กรอบ sass หรือน้อยกว่าสำหรับการเขียนไฟล์ CSS! :)

— gillyb

@romanm - ดูคำตอบของฉันโดยใช้ * เพื่อกำหนดเป้าหมายเด็กทุกคนเพื่อป้องกันการทำซ้ำหรือใช้. class> * สำหรับเด็กตรงทุกคน มันไม่ยาก

— Richard Edwards

คำแนะนำเกี่ยวกับการไม่ได้รับการสนับสนุนใน IE มีประโยชน์มากฉันพยายามทำให้ CSS ทำงานได้กับ DTCoreText บน iOS แต่มันไม่ทำงานตัวแยกวิเคราะห์ของพวกเขาแย่กว่า IE

— ไซเรน

123

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

— Richard Edwards
แหล่งที่มา

11

โปรดทราบว่า * ที่นี่หมายความว่าคุณไม่สามารถแทนที่ได้ด้วยกฎเฉพาะเจาะจงอื่น ๆ เนื่องจาก.test *จะเป็นกฎที่เฉพาะเจาะจงที่สุดสำหรับองค์ประกอบลูกทุกรายการ กล่าวอีกนัยหนึ่งโปรดทราบว่าสิ่งที่คุณใส่เข้าไป.test *ไม่สามารถแทนที่ได้โดยกฎ CSS ที่เฉพาะเจาะจงมากขึ้นเพราะtest *เป็นกฎที่เฉพาะเจาะจงที่สุด

— vadasambar

81

> เลือกตรงกับเด็กโดยตรงเท่านั้นไม่ใช่ลูกหลาน

คุณต้องการ

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>

— เกร็ก
แหล่งที่มา

fwiw เนื่องจาก td และคำบรรยายใต้ภาพในตัวเลือกนั้นเป็น "dumb" - พวกเขาจะจับคู่คำบรรยายภาพที่ระบุโดยไม่คำนึงถึง div.test การกำหนดเป้าหมายแบบคนตาบอดนั้นไม่ค่อยเป็นสิ่งที่คุณต้องการใน CSS สำหรับทุกสิ่งยกเว้นสไตล์ทั่วไป

— annakata

@annakata: ที่เป็นส่วนหนึ่งของกรอบ CSS ที่ฉันพยายามที่จะใช้มันในประเทศ

— ม. โรมัน

10

หากคุณต้องการเพิ่มสไตล์ในเด็กทุกคนและไม่มีข้อกำหนดสำหรับแท็ก html ให้ใช้

แท็กผู้ปกครอง div.parent

แท็กเด็กภายใน div.parent เช่น<a>, <input>, <label>ฯลฯ

รหัส: div.parent * {color: #045123!important;}

คุณสามารถลบสิ่งสำคัญไม่จำเป็น

— user1369111
แหล่งที่มา

7

นี่คือรหัสบางส่วนที่ฉันเพิ่งเขียน ฉันคิดว่ามันให้คำอธิบายพื้นฐานของการรวมชื่อ class / 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>

ขยายตัวอย่างข้อมูล

— เครื่องหมาย
แหล่งที่มา

CSS //ไม่อนุญาตให้แสดงความคิดเห็นบรรทัดเดียวเช่น ดูstackoverflow.com/questions/4656546/…

— Volker E.

4

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

ทำงานได้สำหรับฉัน

ตัวเลือกลูก> ไม่ทำงานใน IE6

— Traingamer
แหล่งที่มา

2

เท่าที่ฉันรู้สิ่งนี้:

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

หรือในกรณีของคุณแม้นี้:

div.yourclass table { your style here; }

(แต่สิ่งนี้จะใช้ได้กับองค์ประกอบyourclassที่อาจไม่ใช่divs) จะมีผลกับตารางภายในyourclassเท่านั้น และอย่างที่เคนพูดว่า>> ไม่รองรับทุกที่ ( div[class=yourclass]เช่นกันดังนั้นให้ใช้เครื่องหมายจุดสำหรับคลาส)

— tunnuz
แหล่งที่มา

0

รหัสนี้สามารถทำเคล็ดลับเช่นกันโดยใช้ไวยากรณ์ SCSS

.parent {
  & > * {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
}

— greguintow
แหล่งที่มา