มีตัวเลือก CSS ตามคำนำหน้าชั้นหรือไม่

175

ฉันต้องการใช้กฎ CSS กับองค์ประกอบใด ๆ ที่มีหนึ่งในชั้นเรียนตรงกับคำนำหน้าระบุ

เช่นฉันต้องการกฎที่จะใช้กับ div ที่มีคลาสที่ขึ้นต้นด้วยstatus-(A และ C แต่ไม่ใช่ B ในตัวอย่างต่อไปนี้):

<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>

การรวมกันของ:
div[class|=status]และdiv[class~=status-]

มันสามารถทำได้ภายใต้ CSS 2.1 หรือไม่ มันสามารถใช้งานได้กับสเปค CSS หรือไม่?

หมายเหตุ: ฉันรู้ว่าฉันสามารถใช้ jQuery เพื่อเลียนแบบสิ่งนั้นได้

css css-selectors

— THX 1138
แหล่งที่มา

373

มันไม่ได้เป็นไปได้กับ CSS2.1 แต่มันก็เป็นไปได้ด้วย CSS3 แอตทริบิวต์เตอร์ substring จับคู่ (ซึ่งได้รับการสนับสนุนใน IE7 +):

div[class^="status-"], div[class*=" status-"]

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

[class^="status-"] - เริ่มต้นด้วย "status-"
[class*=" status-"]- มีสตริงย่อย "status-" ที่เกิดขึ้นโดยตรงหลังช่องว่างอักขระ ชื่อคลาสจะถูกคั่นด้วยช่องว่างต่อข้อมูลจำเพาะ HTMLดังนั้นอักขระช่องว่างที่สำคัญ สิ่งนี้จะตรวจสอบคลาสอื่น ๆ หลังจากครั้งแรกถ้ามีการระบุคลาสหลายคลาสและเพิ่มโบนัสของการตรวจสอบคลาสแรกในกรณีที่ค่าของแอททริบิวนั้นมีช่องว่าง (ซึ่งอาจเกิดขึ้นกับแอพพลิเคชั่นบางclassตัว

ธรรมชาตินี้ยังทำงานใน jQuery ที่แสดงให้เห็นที่นี่

เหตุผลที่คุณต้องรวมตัวเลือกแอททริบิวต์สองตัวตามที่อธิบายไว้ข้างต้นเป็นเพราะตัวเลือกแอททริบิวเช่น[class*="status-"]จะตรงกับองค์ประกอบต่อไปนี้ซึ่งอาจไม่เป็นที่ต้องการ:

<div id='D' class='foo-class foo-status-bar bar-class'></div>

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

หากคุณมีการควบคุมมากกว่า HTML ที่หรือแอพลิเคชันที่สร้างมาร์กอัปมันอาจจะง่ายเพียงแค่ทำให้status-คำนำหน้าของตัวเองstatusระดับแทนที่จะเป็นกระเจี๊ยบแสดงให้เห็น

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

1

หากมีเหตุผลแปลก ๆ ที่คุณมีคลาสที่เรียกว่าstatus-และคุณไม่ต้องการให้ตรงกับที่เลือกตัวเลือกจะกลายเป็นความซับซ้อนมากขึ้น: div[class^="status-"]:not(.status-), div[class*=" status-"]:not(.status-)ถ้าคุณสูญเสียการสนับสนุน IE7 / IE8 โชคดีถ้ามาร์กอัปของคุณมีสติคุณไม่จำเป็นต้องยกเว้นคลาสดังกล่าว

— BoltClock

เกิดอะไรขึ้นกับสิ่งนี้: [class*=" anim-overlay-"] a:hover:after{...}. คลาส CSS ของฉันanim-overlay-1, anim-overlay-2.....anim-overlay-8

— MB Parvez Rony

2

@WebDevRon: คุณลืมส่วน ^ = หากแอตทริบิวต์ class ของคุณรับประกันว่าจะเริ่มต้นด้วยภาพเคลื่อนไหว - แสดงว่าคุณอาจไม่ต้องการส่วน * =

— BoltClock

ขอบคุณ. อีกอย่างฉันสามารถใช้สิ่งนี้ได้.anim-overlay-*{...}หรือไม่

— MB Parvez Rony

2

@Daniel Compton: ขอบคุณสำหรับการแก้ไข ฉันได้รับการตระหนักถึงการเข้าใจถึงการเข้าใจถึงวิธีการที่คำเช่นนั้นสามารถวางตัวให้คนที่บางสิ่งบางอย่างอาจไม่ชัดเจน ฉันรู้ว่าบางคนไม่ชอบการเปลี่ยนแปลงแบบนี้ดังนั้นฉันจึงตอบกลับโดยส่วนใหญ่เพื่อให้คุณรู้ว่าฉันทำ

— BoltClock

14

CSS selectors attribute จะช่วยให้คุณตรวจสอบคุณสมบัติของสตริง (ในกรณีนี้ - ชื่อคลาส)

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

(ดูเหมือนว่าเป็นจริงที่สถานะ 'แนะนำ' สำหรับ 2.1 และ 3)

นี่เป็นโครงร่างของวิธีที่ฉัน * คิดว่ามันใช้งานได้:

[ ]: เป็นคอนเทนเนอร์สำหรับตัวเลือกที่ซับซ้อนถ้าคุณจะ ...
class: 'class' เป็นแอตทริบิวต์ที่คุณกำลังดูในกรณีนี้
* : modifier (ถ้ามี): ในกรณีนี้ - "wildcard" หมายถึงคุณกำลังมองหาการจับคู่ใด ๆ
test- : ค่า (สมมติว่ามีหนึ่ง) ของแอตทริบิวต์ - ที่มีสตริง "test-" (ซึ่งอาจเป็นอะไรก็ได้)

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

[class*='test-'] {
  color: red;
}

คุณอาจเฉพาะเจาะจงมากขึ้นถ้าคุณมีเหตุผลที่ดีพร้อมองค์ประกอบด้วย

ul[class*='test-'] > li { ... }

ฉันพยายามหาเคสที่มีขอบ แต่ฉันไม่เห็นจำเป็นต้องใช้การรวมกันของ- ^และ** ตามที่ได้รับทุกอย่าง ...

ตัวอย่าง: http://codepen.io/sheriffderek/pen/MaaBwp

http://caniuse.com/#feat=css-sel2

ทุกอย่างที่อยู่เหนือ IE6 จะเชื่อฟังอย่างมีความสุข :)

ทราบว่า:

[class] { ... }

จะเลือกอะไรก็ได้ที่มีคลาส ...

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

[class*='test-']<div class='foo-test-bar'>จะตรงกับองค์ประกอบต่างๆเช่น นั่นเป็นเคสแบบขอบเดียวที่ต้องมีการรวม ^ และ * ตามที่อธิบายไว้ในคำตอบของฉัน และ IE6 ไม่รองรับตัวเลือกคุณสมบัติ

— BoltClock

@BoltClock - ขอบคุณสำหรับการชี้แจง! - ฉันไม่สนับสนุน <EI9 - และฉันจะไม่เขียนชั้นเรียนใด ๆ ที่จะเหยียบย่ำกัน - ดังนั้นสำหรับฉันงานนี้ :)

— sheriffderek

6

ไม่สามารถทำได้ด้วยตัวเลือก CSS แต่คุณสามารถใช้สองชั้นแทนหนึ่งเช่นสถานะและที่สำคัญแทนสถานะที่สำคัญ

— ต้นกระเจี๊ยบ
แหล่งที่มา

14

ความคิดที่ดีเกี่ยวกับการแยกมันออกเป็นคลาสของตัวเอง แต่เป็นไปได้ด้วยตัวเลือก CSS ดูคำตอบของฉัน

— BoltClock

2

คุณทำสิ่งนี้ไม่ได้ มีตัวเลือกคุณลักษณะหนึ่งตัวที่จับคู่ทั้งหมดหรือบางส่วนจนกระทั่งเครื่องหมาย - แต่มันจะไม่ทำงานที่นี่เพราะคุณมีคุณสมบัติหลายอย่าง หากชื่อชั้นเรียนที่คุณกำลังมองหามักจะเป็นอันดับแรกคุณสามารถทำได้:

<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>

</body>
</html>

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

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

2

ใช่คิดอย่างนั้น มันอาจกลายเป็นปัญหาเมื่อ jQuery เข้ามาในรูปภาพเพราะมันอาจแทรกคลาสที่ด้านหน้า

— THX-1138

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

— SBUJOLD