ตัวเลือก CSS นี้คืออะไร? [ระดับ * =“ช่วง”]

ฉันเห็นตัวเลือกนี้ใน Twitter Bootstrap:

.show-grid [class*="span"] {
    background-color: #eee;
    text-align: center;
    border-radius: 3px;
    min-height: 30px;
    line-height: 30px;
}

ไม่มีใครรู้ว่าสิ่งที่เรียกว่าเทคนิคนี้และมันทำอะไร?

มันเป็นตัวเลือกสัญลักษณ์ตัวแทนของคุณลักษณะ ในตัวอย่างที่คุณได้รับจะมองหาองค์ประกอบลูกใด ๆ ภายใต้ที่มีชั้นเรียนที่มี.show-gridspan

ดังนั้นจะเลือก<strong>องค์ประกอบในตัวอย่างนี้:

<div class="show-grid">
    <strong class="span6">Blah blah</strong>
</div>

นอกจากนี้คุณยังสามารถค้นหา 'เริ่มต้นด้วย ... '

div[class^="something"] { }

ซึ่งจะทำงานกับสิ่งนี้: -

<div class="something-else-class"></div>

และ 'ลงท้ายด้วย ... '

div[class$="something"] { }

ซึ่งจะทำงานใน

<div class="you-are-something"></div>

อ้างอิงที่ดี

• CSS3 Attribute Selectors: การจับคู่สตริงย่อย
• ตัวเลือก CSS 30 ตัวที่คุณต้องจดจำ
• W3C CSS3 Selectors

.show-grid [class*="span"]

มันเป็นตัวเลือก CSS ที่เลือกองค์ประกอบทั้งหมดที่มีระดับการแสดงตารางที่มีองค์ประกอบของเด็กที่เป็นระดับมีชื่อช่วง

ต่อไปนี้:

.show-grid [class*="span"] {

หมายความว่าองค์ประกอบลูกทั้งหมดของ '.show-grid' พร้อมคลาสที่มีคำว่า 'span' อยู่ในนั้นจะได้รับคุณสมบัติ CSS เหล่านั้น

<div class="show-grid">
  <div class="span">.span</div>
  <div class="span6">span6</div>
  <div class="attention-span">attention</div>
  <div class="spanish">spanish</div>
  <div class="mariospan">mariospan</div>
  <div class="espanol">espanol</div>

  <div>
    <div class="span">.span</div>
  </div>

  <p class="span">span</p>
  <span class="span">I do GET HIT</span>

  <span>I DO NOT GET HIT since I need a class of 'span'</span>
</div>

<div class="span">I DO NOT GET HIT since I'm outside of .show-grid</span>

องค์ประกอบทั้งหมดได้รับผลกระทบยกเว้น<span>ตัวมันเอง

เกี่ยวกับ Bootstrap:

• span6: นี่เป็นเทคนิคการนั่งร้านของ Bootstrap 2 ซึ่งแบ่งส่วนออกเป็นกริดแนวนอนตามส่วนที่ 12 ดังนั้นspan6จะมีความกว้าง 50%
• ในการปรับใช้ Bootstrap ในวันปัจจุบัน (v.3 และ v.4) ตอนนี้คุณใช้.col-*คลาส (เช่นcol-sm-6) ซึ่งระบุจุดพักสื่อเพื่อจัดการการตอบสนองเมื่อหน้าต่างย่อขนาดต่ำกว่าขนาดที่กำหนด ตรวจสอบBootstrap 4.1และBootstrap 3.3.7สำหรับเอกสารเพิ่มเติม ฉันอยากจะแนะนำให้ไปกับ Bootstrap ภายหลังทุกวันนี้

มันเลือกองค์ประกอบทั้งหมดที่ชื่อชั้นเรียนมีสตริง"span"ที่ไหนสักแห่ง นอกจากนี้ยังมี^=สำหรับการเริ่มต้นของสตริงและ$=สำหรับจุดสิ้นสุดของสตริง นี่คือข้อมูลอ้างอิงที่ดีสำหรับตัวเลือก CSS บางตัว: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

ฉันก็แค่คุ้นเคยกับการเรียนการบูตspanXที่ X เป็นจำนวนเต็ม แต่ถ้ามีตัวเลือกอื่น ๆ ที่สิ้นสุดในspanก็ยังจะตกอยู่ภายใต้กฎระเบียบเหล่านี้

มันเพียงช่วยในการใช้กฎ CSS แบบครอบคลุม