เครื่องหมายจุลภาคและช่องว่างในหลายชั้นเรียนมีความหมายอย่างไรใน CSS

นี่คือตัวอย่างที่ฉันไม่เข้าใจ:

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

สำหรับฉันแล้วดูเหมือนว่าwidth: 460pxจะใช้กับชั้นเรียนที่กล่าวถึงข้างต้นทั้งหมด แต่ทำไมบางชั้นเรียนจึงคั่นด้วยเครื่องหมายจุลภาค ( ,) และบางชั้นก็เว้นวรรค

ฉันคิดว่าwidth: 460pxจะใช้กับองค์ประกอบเหล่านั้นที่รวมคลาสตามที่กล่าวไว้ในไฟล์ CSS เท่านั้น ตัวอย่างเช่นจะใช้กับ<div class='container_12 grid_6'>แต่จะไม่ใช้กับไฟล์<div class='container_12'>. สมมติฐานนี้ถูกต้องหรือไม่?

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

ที่ระบุว่า "สร้าง. grid_6 ทั้งหมดภายใน .container_12 และ. grid_8 ทั้งหมดภายใน. 460 พิกเซลของ .container_16" ดังนั้นทั้งสองอย่างต่อไปนี้จะแสดงผลเหมือนกัน:

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

สำหรับเครื่องหมายจุลภาคจะใช้กฎเดียวกับหลายชั้นเรียนเช่นนี้

.blueCheese, .blueBike {
  color:blue;
}

เทียบเท่ากับการทำงาน:

.blueCheese { color:blue }
.blueBike { color:blue }

แต่ลดความฟุ่มเฟื่อยลง

.container_12 .grid_6 { ... }

กฎข้อนี้ตรงกับโหนด DOM กับการเรียนcontainer_12ที่มีลูกหลาน (ไม่จำเป็นต้องเป็นเด็ก) กับการเรียนgrid_6และการใช้กฎ CSS เพื่อองค์ประกอบ DOM grid_6ที่มีระดับ

.container_12 > .grid_6 { ... }

ใส่>ระหว่างพวกเขาบอกว่าโหนดจะต้องเป็นเด็กโดยตรงของโหนดกับการเรียนgrid_6container_12

.container_12, .grid_6 { ... }

ลูกน้ำตามที่คนอื่น ๆ ระบุไว้เป็นวิธีการใช้กฎกับโหนดต่างๆจำนวนมากในคราวเดียว ในกรณีนี้กฎระเบียบที่นำไปใช้กับโหนดใด ๆ กับทั้งชั้นหรือcontainer_12grid_6

ไม่ตรงกับสิ่งที่ถาม แต่อาจจะช่วยได้

หากต้องการใช้สไตล์กับองค์ประกอบก็ต่อเมื่อมีทั้งสองคลาสตัวเลือกของคุณไม่ควรใช้ช่องว่างระหว่างชื่อคลาส

ตัวอย่างเช่น:

.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }

<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>

คอมมาจัดกลุ่มคลาส (ใช้สไตล์เดียวกันกับคลาสทั้งหมด) พื้นที่ว่างบอกว่าตัวเลือกต่อไปนี้ต้องอยู่ในตัวเลือกแรก

ดังนั้น

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

ใช้รูปแบบที่ชั้นเดียว.grid_6ซึ่งอยู่ใน.container_12ระดับและชั้นซึ่งอยู่ภายใน.grid_8.container_16

width: 460px;จะถูกนำไปใช้กับองค์ประกอบที่มี.grid_8ชั้นเรียนที่มีอยู่ภายในองค์ประกอบที่มี.container_16ระดับและองค์ประกอบที่มี.grid_6ชั้นเรียนที่มีอยู่ภายใน.container_12องค์ประกอบด้วย

ช่องว่างหมายถึงมรดกและลูกน้ำหมายถึง 'และ' หากคุณใส่คุณสมบัติด้วยตัวเลือกเช่น
.class-a, .class-bคุณจะมีคุณสมบัติที่ใช้กับองค์ประกอบกับใครก็ได้ในสองคลาส

หวังว่าฉันจะช่วย

คุณมีคลาสสี่คลาสและตัวเลือกสองตัวในตัวอย่างของคุณ:

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

ดังนั้น.container_12และ.grid_6เป็นทั้งสองคลาส แต่กฎwidth: 460pxจะใช้กับองค์ประกอบที่มี.grid_6คลาสซึ่งเป็นลูกหลานขององค์ประกอบที่มี.container_16คลาส

ตัวอย่างเช่น:

<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>

ข้างต้นหมายความว่าคุณกำลังใช้สไตล์กับสองคลาสซึ่งระบุด้วยลูกน้ำ

เมื่อคุณเห็นสององค์ประกอบที่อยู่เคียงข้างกันไม่ได้แยกออกจากกันคุณสามารถสันนิษฐานได้ว่าหมายถึงพื้นที่ภายในพื้นที่ ดังนั้นในข้างต้นสไตล์นี้ใช้ได้กับคลาส grid_6 ภายในคลาส container_12 และคลาส grid_8 ภายในคลาส container_16 เท่านั้น

ในตัวอย่าง:

<div class="grid_6">This is not effected</div>
<div class="container_12">
  <div class="grid_6">
    This is effected.
  </div>
</div>

grid_6 แรกจะไม่ได้รับผลในขณะที่คลาส grid_6 ที่สองจะเกิดขึ้นเนื่องจากมีอยู่ภายใน container_12

คำสั่งเช่น

#admin .description p { font-weight:bold; }

จะใช้เฉพาะตัวหนากับ

แท็กภายในพื้นที่ที่มีคลาส "description" ซึ่งอยู่ภายในพื้นที่ที่มี id "admin" เช่น:

<div id="admin">
   <div class="description">
      <p>This is bold</p>
   </div>
</div>

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

width:460pxจะใช้ได้เฉพาะกับ.grid_6และ.grid_8

แก้ไข: นี่เป็นบทความที่ดีมากสำหรับคุณ

http://css-tricks.com/multiple-class-id-selectors/

ชุดตัวเลือกมีความหมายที่แตกต่างกัน - ภาพที่แนบมาอธิบายได้ง่าย

a) ตัวเลือกหลายตัวคั่นด้วยเครื่องหมายลูกน้ำ ( ,) - รูปแบบเดียวกันจะถูกนำไปใช้กับองค์ประกอบที่เลือกทั้งหมด

div,.elmnt-color {
  border: 1px solid red;
}

ลักษณะเส้นขอบที่นี่ใช้กับDIVองค์ประกอบและ.elmnt-colorองค์ประกอบที่ใช้คลาส CSS

<!-- comma example -->
<div>
  Red border applied
</div>
<p class="elmnt-color">
  Red border applied
</p>

b) ตัวเลือกหลายตัวคั่นด้วยช่องว่าง - สิ่งเหล่านี้เรียกว่าตัวเลือกลูกหลาน

div .elmnt-color {
  background-color: red;
}

ลักษณะเส้นขอบที่นี่จะนำไปใช้กับ.elmnt-colorองค์ประกอบที่ใช้คลาส CSS ซึ่งเป็นองค์ประกอบลูกของDIVองค์ประกอบ

<!-- space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border applied
  </p>
</div>

c) ตัวเลือกหลายตัวที่ระบุโดยไม่มีช่องว่าง - รูปแบบที่นี่จะใช้กับองค์ประกอบที่ตรงตามชุดค่าผสมทั้งหมด

div.elmnt-color {
  border: 1px solid red;
}

ลักษณะเส้นขอบที่นี่จะใช้กับDIVองค์ประกอบที่มีคลาส CSS ของ.elmnt-color.

<!-- no space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border NOT applied
  </p>
</div>
<div class="elmnt-color">
  Red border applied
</div>

รายละเอียดแนบมาที่https://www.csssolid.com/css-tips.html

หมายเหตุ: CSS Class เป็นเพียงหนึ่งใน CSS Selectors กฎเหล่านี้ใช้กับCSS Selectors ทั้งหมด (เช่น Class, Element, ID เป็นต้น)