wildcard * ใน CSS สำหรับคลาส

670

ฉันมี divs เหล่านี้ที่ผมจัดแต่งทรงผมด้วย.tocolorแต่ฉันยังต้องระบุที่ไม่ซ้ำ 1,2,3,4 ฯลฯ tocolor-1ดังนั้นฉันเพิ่มว่ามันเป็นชั้นอื่น

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

.tocolor{
  background: red;
}

มีวิธีที่จะมีเพียงแค่ 1 คลาสtocolor-*หรือไม่ ฉันพยายามใช้ไวด์การ์ด*เหมือนใน css นี้ แต่มันไม่ทำงาน

.tocolor-*{
  background: red;
}

css css-selectors wildcard

— พูดเบาและรวดเร็ว
แหล่งที่มา

1

นี่คือเว็บไซต์ CSS3 อย่างเป็นทางการเกี่ยวกับตัวเลือก: w3.org/TR/css3-selectorsและรายการความสามารถในการค้นหา: findmebyip.com/litmus

— GarfieldKlon

1216

สิ่งที่คุณต้องการเรียกว่า attribute selector ตัวอย่างเช่นใช้โครงสร้าง html ของคุณดังต่อไปนี้:

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

ในสถานที่ของdivคุณสามารถเพิ่มองค์ประกอบใด ๆ หรือลบออกทั้งหมดและในสถานที่ของclassคุณสามารถเพิ่มคุณลักษณะใด ๆ ขององค์ประกอบที่ระบุ

[class^="tocolor-"]- เริ่มต้นด้วย "tocolor-"
[class*=" tocolor-"]- มีสตริงย่อย "tocolor-" ที่เกิดขึ้นโดยตรงหลังจากอักขระช่องว่าง

การสาธิต: http://jsfiddle.net/K3693/1/

ข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือก CSS แอตทริบิวต์คุณสามารถหาได้ที่นี่และที่นี่ และจากเอกสารMDN เอกสาร MDN

— โซ
แหล่งที่มา

2

ข้อมูลยอดเยี่ยม ข้อแม้เท่านั้นคือถ้าประสิทธิภาพเป็นปัญหา CSS linters ส่วนใหญ่จะปฏิเสธตัวเลือกคุณลักษณะที่มีลักษณะคล้าย regex (เช่นใช้ '*') b / c ของประสิทธิภาพที่ช้า ด้วยข้อยกเว้นของการใช้ preprocessor (เช่น Sass) มีวิธีอื่นที่เป็นไปได้ในการทำเช่นนี้หรือไม่?

— CodeFinity

2

มีวิธีการตรวจสอบว่าแอตทริบิวต์ class มีหลาย substrings หรือไม่ บางทีสิ่งที่ชอบdiv[class*="foo"][class="bar"]?

— Connor

พื้นที่ดังกล่าวในตัวอย่าง "บรรจุ" ของเราคือนักฆ่าที่น่ารัก จากสิ่งที่ฉันเห็นมันไม่ควรอยู่ที่นั่นถูกต้อง?

— โทมัส

1

@Thomas ที่จำเป็นเพื่อให้แน่ใจว่าการclass="foo tocolor-red"แข่งขัน แต่ไม่ใช่class="foo fromtocolor-red-blue"

— aleclarson

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

— BevansDesign

108

ใช่คุณทำได้

*[id^='term-']{
    [css here]
}

'term-'นี้จะเลือกรหัสทั้งหมดที่เริ่มต้นด้วย

สำหรับเหตุผลที่ไม่ทำสิ่งนี้ฉันเห็นว่าการเลือกแบบนี้ดีกว่าที่ใด สำหรับสไตล์ฉันจะไม่ทำเอง แต่เป็นไปได้

— thomas.han
แหล่งที่มา

ขอขอบคุณสำหรับการนี้IDภาคผนวกตามไม่เพียง classแต่สำหรับ

— Khom Nazid

26

ทางเลือกอื่น:

div[class|='tocolor'] จะจับคู่กับค่าของแอตทริบิวต์ "class" ที่ขึ้นต้นด้วย "tocolor-" รวมถึง "tocolor-1", "tocolor-2" เป็นต้น

ระวังว่าสิ่งนี้จะไม่ตรงกัน

<div class="foo tocolor-">

การอ้างอิง: https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

แสดงให้เห็นถึงองค์ประกอบที่มีแอตทริบิวต์ att ค่าของมันอาจเป็น "val" หรือเริ่มต้นด้วย "val" ตามด้วย "-" (U + 002D) ทันที

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

12

นี้จะไม่ทำงานถ้าclassแอตทริบิวต์การเริ่มต้นกับการเรียนอื่น ๆ tocolorบางที่ไม่ได้เริ่มต้นด้วย

— BoltClock

1

นอกจากนี้ยังใช้งานได้อย่างสวยงามในสไตล์วิดเจ็ตของ Qt ตัวอย่างเช่นหากต้องการใช้สไตล์กับป้ายกำกับทั้งหมดที่มีชื่อfoo*คุณจะต้องทำQLabel[objectName|='foo'] { ... }

— Reinstate Monica

ในฐานะที่เป็น @BoltClock กล่าวว่าวิธีการแก้ปัญหานี้แตกถ้าองค์ประกอบมีหลายชั้นเรียนและพวกเขาไม่ได้เริ่มต้นด้วยชั้น OP กำลังมองหา

— Dan Dascalescu

ใช้งานไม่ได้กับ Chrome 78, * และ ^ ใช้งานได้

— Gordon Mohrin

3

หากคุณไม่ต้องการตัวระบุที่ไม่ซ้ำสำหรับการกำหนดสไตล์เพิ่มเติมของ divs และใช้ HTML5 คุณสามารถลองใช้แอตทริบิวต์ข้อมูลที่กำหนดเองได้ อ่านต่อที่นี่หรือลองค้นหาด้วยกูเกิ้ลHTML5 Custom Data Attributes

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