CSS คลาสและคลาสย่อย

102

เป็นไปได้ไหมนอกจากสิ่งที่ฉันกำลังทำอยู่เพราะดูเหมือนจะไม่ได้ผลที่จะทำเช่นนี้ ฉันต้องการให้มีคลาสย่อยที่อยู่ภายใต้คลาสเพื่อใช้ CSS เฉพาะสำหรับคลาสนั้น ๆ Subclass

CSS

.area1
{
    border:1px solid black;
}
.area1.item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2.item
{
    color:blue;
}

HTML

<div class="area1">
    <table>
        <tr>
            <td class="item">Text Text Text</td>
            <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>
<div class="area2"> 
    <table>
        <tr>
            <td class="item">Text Text Text</td>
            <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>

เพื่อให้ฉันสามารถใช้ class = "item" สำหรับองค์ประกอบภายใต้คลาส css แม่ "area1", "area2" ฉันรู้ว่าฉันสามารถใช้ class = "area1 item" เพื่อให้มันใช้งานได้ แต่ฉันไม่เข้าใจว่าทำไมมันต้องละเอียดขนาดนั้น คลาสย่อย css ไม่ควรมองว่าคลาสพาเรนต์อยู่ภายใต้อะไรเพื่อที่จะกำหนดมัน?

หมายเหตุ: ใช้งานได้ใน IE (ตอนนี้ใช้ 7) แต่ใน FF ไม่ได้ดังนั้นฉันถือว่านี่ไม่ใช่วิธีมาตรฐาน CSS ในการทำอะไรบางอย่าง

css

— Ryan Abbott
แหล่งที่มา

183

เพียงแค่ต้องเพิ่มช่องว่าง:

.area2 .item
{
    ...
}

— ชาดเบิร์ช
แหล่งที่มา

ฉันไม่ได้ใช้คลาสย่อยด้วยตัวเองจริงๆ ...... มีใครให้เหตุผลที่จำเป็นได้บ้าง?

— patricksweeney

2

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

— Matt Howell

74

FYI เมื่อคุณกำหนดกฎเช่นเดียวกับที่คุณทำข้างต้นโดยมีตัวเลือกสองตัวเชื่อมโยงเข้าด้วยกัน:

.area1.item
{
    color:red;
}

หมายความว่า:

นำสไตล์นี้ไปใช้กับองค์ประกอบใดก็ได้ที่มีทั้งคลาส "area1" และ "item"

เช่น:

<div class="area1 item">

น่าเสียดายที่มันใช้ไม่ได้ใน IE6 แต่นั่นคือความหมาย

— Matt Howell
แหล่งที่มา

1

นี่คือสิ่งที่ฉันกำลังมองหาจริงๆขอบคุณที่อธิบาย!

— F-3000

ฉันรู้ว่านี่เป็นของโบราณ แต่คุณหมายถึง "area1" หรือ "item" แทนที่จะเป็น "area1" และ "item"? มันสร้างความแตกต่างอย่างมีนัยสำคัญ

— Mgamerz

ขอบคุณมากสำหรับสิ่งนี้ฉันพยายามคิดเรื่องนี้

— user3547774

26

ปัญหาของคุณดูเหมือนจะขาดช่องว่างระหว่างคลาสทั้งสองของคุณใน CSS:

.area1.item
{
    color:red;
}

ควรจะเป็น

.area1 .item
{
    color:red;
}

— นกแก้ว
แหล่งที่มา

14

คุณต้องการบังคับให้มีการคัดเลือกเด็กเท่านั้นหรือไม่? http://css.maxdesign.com.au/selectutorial/selectors_child.htm

.area1
{
        border:1px solid black;
}
.area1>.item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2>.item
{
    color:blue;
}

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

1

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

— Ryan Abbott

ไม่ทราบเกี่ยวกับเรื่องนั้น ขอบคุณที่ MrChrister

— Sebastian Sastre

10

เพียงแค่ใส่ช่องว่างระหว่าง .area1 และ. รายการเช่น:

.area1 .item
{
    color:red;
}

สไตล์นี้ใช้กับองค์ประกอบที่มีไอเท็มคลาสภายในองค์ประกอบที่มีคลาส area1

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

8

เพียงแค่เว้นวรรคระหว่างชั้นเรียนของคุณ

.area1 .item
{
    ...
}

นี่คือการอ้างอิงที่ดีมากสำหรับCSS Selectors

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

6

ต่อจากคำตอบของ kR105 ด้านบน:

ปัญหาของฉันคล้ายกับ OP (โปสเตอร์ดั้งเดิม) เกิดขึ้นนอกตารางเท่านั้นดังนั้นคลาสย่อยจึงไม่ถูกเรียกจากภายในขอบเขตของคลาสแม่ (ตาราง) แต่อยู่นอกมันฉันจึงต้องเพิ่มตัวเลือก ดังที่ kR105 กล่าวถึง

นี่คือปัญหา: ฉันมีสองช่อง (div) แต่ละกล่องมีรัศมีขอบ (HTML5) ช่องว่างภายในและระยะขอบเท่ากัน แต่จำเป็นต้องทำให้สีต่างกัน แทนที่จะทำซ้ำพารามิเตอร์ 3 ตัวสำหรับแต่ละคลาสสีฉันต้องการให้ "ซูเปอร์คลาส" มี border-radius / padding / margin จากนั้นให้ "คลาสย่อย" แต่ละรายการเพื่อแสดงความแตกต่าง (เครื่องหมายคำพูดคู่รอบแต่ละคลาสเนื่องจากไม่ใช่คลาสย่อย - ดูโพสต์ในภายหลังของฉัน) นี่คือวิธีการทำงาน:

HTML:

<body>
  <div class="box box1"> Hello my color is RED </div>
  <div class="box box2"> Hello my color is BLUE </div>
</body>

CSS:

div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px}
div.box1 {border:3px solid red; color:red}
div.box2 {border:3px solid blue; color:blue}

หวังว่าจะมีคนพบว่าสิ่งนี้เป็นประโยชน์

— สังฆ
แหล่งที่มา

3

นั่นคือกระดูกสันหลังของ CSS "cascade" ในCascading Style Sheets

หากคุณเขียนกฎ CSS เป็นบรรทัดเดียวจะช่วยให้ดูโครงสร้างได้ง่ายขึ้น:

.area1 .item { color:red; }
.area2 .item { color:blue; }
.area2 .item span { font-weight:bold; }

การใช้หลายคลาสเป็นการใช้ CSS ระดับกลาง / ขั้นสูงที่ดี แต่น่าเสียดายที่มีข้อผิดพลาด IE6 ที่รู้จักกันดีซึ่ง จำกัด การใช้งานนี้เมื่อเขียนโค้ดข้ามเบราว์เซอร์:

<div class="area1 larger"> .... </div>

.area1 { width:200px; }
.area1.larger { width:300px; }

IE6 ไม่สนใจตัวเลือกแรกในกฎหลายคลาสดังนั้น IE6 จึงใช้กฎ .area1.larger เป็น

/*.area1*/.larger { ... }

ความหมายจะส่งผลต่อองค์ประกอบ. ขนาดใหญ่ทั้งหมด

เป็นข้อผิดพลาดที่น่ารังเกียจและโชคร้าย (หนึ่งในหลาย ๆ ) ใน IE6 ที่บังคับให้คุณแทบไม่เคยใช้คุณสมบัติของ CSS นั้นเลยหากคุณต้องการไฟล์ CSS ข้ามเบราว์เซอร์ที่สะอาด

วิธีแก้ปัญหาคือใช้คำนำหน้าชื่อคลาส CSS เพื่อหลีกเลี่ยงการชนกับชื่อคลาสทั่วไป:

.area1 { ... }
.area1.area1Larger { ... }

.area2.area2Larger { ... }

อาจใช้เพียงคลาสเดียว แต่ด้วยวิธีนี้คุณสามารถเก็บ CSS ไว้ในตรรกะที่คุณต้องการได้ในขณะที่รู้ว่า .area1Larger มีผลกับ .area1 เท่านั้นเป็นต้น

1

คลาสที่คุณใช้กับ div สามารถใช้เป็นจุดอ้างอิงขององค์ประกอบสไตล์ด้วย div นั้นได้เช่น

<div class="area1">
    <table>
        <tr>
                <td class="item">Text Text Text</td>
                <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>


.area1 { border:1px solid black; }

.area1 td { color:red; } /* This will effect any TD within .area1 */

เพื่อให้มีความหมายสูงคุณควรย้ายชั้นเรียนไปที่โต๊ะ

    <table class="area1">
        <tr>
                <td>Text Text Text</td>
                <td>Text Text Text</td>
        </tr>
    </table>

— George Wiscombe
แหล่งที่มา

1

คุณยังสามารถมีสองคลาสภายในองค์ประกอบเช่นนี้

<div class = "item1 item2 item3"></div>

แต่ละรายการในคลาสเป็นคลาสของตัวเอง

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

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

1

kR105 เขียนว่า:

คุณยังสามารถมีสองคลาสภายในองค์ประกอบเช่นนี้

<div class = "item1 item2 item3"></div

ฉันมองไม่เห็นคุณค่าของสิ่งนี้เนื่องจากตามหลักการของรูปแบบการเรียงซ้อนรูปแบบสุดท้ายจึงมีความสำคัญ ตัวอย่างเช่นหากในตัวอย่างก่อนหน้านี้ฉันเปลี่ยน HTML เพื่ออ่าน

 <div class="box1 box2"> Hello what is my color? </div>

เส้นขอบและข้อความของกล่องจะเป็นสีน้ำเงินเนื่องจากรูปแบบของ. box2 กำหนดค่าเหล่านี้

นอกจากนี้ในโพสต์ก่อนหน้าของฉันฉันควรเน้นย้ำว่าการเพิ่มตัวเลือกเหมือนที่ฉันทำนั้นไม่เหมือนกับการสร้างคลาสย่อยภายในคลาส (โซลูชันแรกในเธรดนี้) แม้ว่าเอฟเฟกต์จะคล้ายกันก็ตาม

— สังฆ
แหล่งที่มา