เลือกองค์ประกอบตามคุณสมบัติข้อมูลใน CSS

488

เป็นไปได้หรือไม่ที่จะเลือกองค์ประกอบใน CSS โดยใช้แอตทริบิวต์ข้อมูล HTML5 (เช่นdata-role)

776

หากคุณหมายถึงการใช้ตัวเลือกแอททริบิวแน่นอนว่าทำไม:

[data-role="page"] {
    /* Styles */
}

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

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

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

4

เข้ากันได้กับระบบนำทางทั้งหมดหรือไม่

— Christophe Debove

21

@Christophe Debove: IE7 + และทุกอย่างอื่น

— BoltClock

7

CSS ดูเหมือนจะไม่ตรวจพบสิ่งนี้หากตั้งค่าข้อมูลหรือเปลี่ยนผ่าน JS

— ᴍᴀᴛᴛʙᴀᴋᴇʀ

30

หลังจากการตรวจสอบเพิ่มเติมจะ$("#element").data("field","value");ไม่เปลี่ยนค่าแอตทริบิวต์ของข้อมูล แต่จะแก้ไขเฉพาะเวอร์ชันที่แคชของ jQuery ของ DOM เท่านั้น เพื่อที่จะเปลี่ยนแอตทริบิวต์ DOM $("#element").attr("data-field","value");จริงหนึ่งในความต้องการที่จะใช้ ทำให้ความคิดเห็นเดิมของฉันไม่ถูกต้อง

— ᴍᴀᴛᴛʙᴀᴋᴇʀ

2

ใช่ดูเหมือนว่าการเปลี่ยนชุดข้อมูลจะทำงานได้ดีเช่น@Matthew - jsfiddle.net/BoltClock/k378xgj3ขอบคุณที่ไม่มี jQuery

— BoltClock

107

นอกจากนี้ยังเป็นไปได้ที่จะเลือกแอตทริบิวต์โดยไม่คำนึงถึงเนื้อหาในเบราว์เซอร์สมัยใหม่

ด้วย:

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

ตัวอย่างเช่น: http://codepen.io/jasonm23/pen/fADnu

ทำงานบนเบราว์เซอร์เปอร์เซ็นต์ที่สำคัญมาก

หมายเหตุสิ่งนี้สามารถใช้ในตัวเลือก JQuery หรือใช้ document.querySelector

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

ว้าวฉันไม่เคยเห็นมันสามารถใช้แบบนั้นได้ !! +1! และ FWIW ตอนนี้เบราว์เซอร์ภาพหมดอายุแล้วฉันเชื่อว่ามันใช้งานได้ใน IE7 + ดังนั้นการสนับสนุนของมันจึงอยู่ทั่วไปทุกหนทุกแห่ง เป็นเรื่องตลกที่ไม่มีแม้แต่ Chris Coyier พูดถึงที่นี่

— Camilo Martin

ขอบคุณ @CamiloMartin ฉันได้ลบลิงค์ browserhots ออกเพื่อหลีกเลี่ยงความสับสน / ความรำคาญ

— ocodo

เพิ่มลิงก์ไปยังเธรดของ Chris Coyier css-tricks.com/attribute-selectors/#comment-965838 @CamiloMartin

— ocodo

1

ไม่มีไวยากรณ์ใหม่นี้ - ผู้คนจำนวนมากประหลาดใจที่ IE6 ไม่รองรับมากกว่า IE7 + คุณสามารถสมมติว่าCSS2.1 selectorsทั้งหมดได้รับการสนับสนุนใน IE8 และใหม่กว่า - IE7 ทำได้ดีที่สุดแม้ว่าจะมีข้อบกพร่องที่คลุมเครือเล็กน้อย เบราว์เซอร์ที่ทันสมัยทุกรุ่นรองรับตัวเลือกระดับ 3เป็นระยะเวลาหนึ่งโดยที่ Chrome เป็นตัวเลือกที่น่าสนใจ

— BoltClock

1

เนื่องจากเราอยู่ในหัวข้อของแอตทริบิวต์เตอร์ แต่ก็น่าสนใจที่จะทราบว่าตัวเลือกย่อยแอตทริบิวต์ที่ถูกนำมาใช้ในระดับ 3 ( ^=, *=และ$=) ได้รับการสนับสนุนโดย IE7 และ IE8 บางทีพวกเขาอาจถูกนำมาใช้ใน IE ก่อนที่จะเป็นมาตรฐาน

— BoltClock

47

เป็นที่น่าสังเกต CSS3 substring attribute selectors

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}

— Matas Vaitkevicius
แหล่งที่มา

13

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

ตัวเลือกแอททริบิวต์จะช่วยให้คุณเล่นกับแอททริบิวidและแอปclass

นี่คือการอ่านที่ยอดเยี่ยมเกี่ยวกับSelectors Selectors

ซอ

a[href="http://aamirshahzad.net"][title="Aamir"] {
  color: green;
  text-decoration: none;
}

a[id*="google"] {
  color: red;
}

a[class*="stack"] {
  color: yellow;
}

<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

ขยายตัวอย่างข้อมูล

รองรับเบราว์เซอร์:
IE6 +, Chrome, Firefox และ Safari

คุณสามารถตรวจสอบรายละเอียดที่นี่

— Aamir Shahzad
แหล่งที่มา

4

    [data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}

— ข่าน Naved
แหล่งที่มา