ฉันจะกำหนดเป้าหมายองค์ประกอบด้วยแอตทริบิวต์ที่มีค่าใน CSS ได้อย่างไร

ฉันรู้ว่าฉันสามารถกำหนดเป้าหมายองค์ประกอบที่มีแอตทริบิวต์เฉพาะใน CSS ได้เช่น:

input[type=text]
{
    font-family: Consolas;
}

แต่เป็นไปได้หรือไม่ที่จะกำหนดเป้าหมายองค์ประกอบที่มีแอตทริบิวต์ของค่าใด ๆ (ยกเว้นไม่มีอะไรเลยเช่นเมื่อไม่ได้เพิ่มแอตทริบิวต์ลงในองค์ประกอบ)

ประมาณว่า:

a[rel=*]
{
    color: red;
}

ซึ่งควรกำหนดเป้าหมาย<a>แท็กแรกและที่สามใน HTML นี้:

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

ฉันคิดว่าเป็นไปได้เพราะโดยค่าเริ่มต้นcursor: pointerดูเหมือนว่าจะถูกนำไปใช้กับ<a>แท็กใด ๆที่มีค่าสำหรับhrefแอตทริบิวต์

ต่อไปนี้จะจับคู่แท็กจุดยึดที่มีrelแอตทริบิวต์ที่กำหนดไว้:

a[rel]
{
    color: red;
}

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

อัปเดต: ในการพิจารณาสถานการณ์ที่ @vsync ที่กล่าวถึงในส่วนความคิดเห็น (การแยกความแตกต่างระหว่างค่า emtpy / ไม่ว่างเปล่า) คุณสามารถรวม:not คลาสหลอก CSS :

a[rel]:not([rel=""])
{
    color: red;
}

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

ใช่ใน CSS 3 เตอร์มีหลายตัวเลือกแอตทริบิวต์

เช่น

[att] แสดงถึงองค์ประกอบที่มีแอตทริบิวต์ Att ไม่ว่าจะเป็นค่าของแอตทริบิวต์ใด

[att = val] แสดงถึงองค์ประกอบที่มีแอตทริบิวต์ att ซึ่งมีค่าเท่ากับ "val"

[att ~ = val] แสดงถึงองค์ประกอบที่มีแอตทริบิวต์ att ซึ่งมีค่าเป็นรายการคำที่คั่นด้วยช่องว่างซึ่งหนึ่งในนั้นคือ "val" หาก "val" มีช่องว่างก็จะไม่ใช้แทนค่าใด ๆ เลย (เนื่องจากคำถูกคั่นด้วยช่องว่าง) นอกจากนี้ถ้า "val" เป็นสตริงว่างก็จะไม่แสดงอะไรเลย

[att ^ = val] แสดงถึงองค์ประกอบที่มีแอตทริบิวต์ att ซึ่งค่าเริ่มต้นด้วยคำนำหน้า "val" ถ้า "val" เป็นสตริงว่างตัวเลือกจะไม่แสดงอะไรเลย

[att $ = val] แสดงถึงองค์ประกอบที่มีแอตทริบิวต์ att ซึ่งค่าลงท้ายด้วยคำต่อท้าย "val" ถ้า "val" เป็นสตริงว่างตัวเลือกจะไม่แสดงอะไรเลย

[att * = val] แสดงถึงองค์ประกอบที่มีแอตทริบิวต์ att ซึ่งค่ามีอย่างน้อยหนึ่งอินสแตนซ์ของสตริงย่อย "val" ถ้า "val" เป็นสตริงว่างตัวเลือกจะไม่แสดงอะไรเลย

ควรเพิ่มว่าหากเบราว์เซอร์ตั้งค่าแอตทริบิวต์ตามค่าเริ่มต้นคุณอาจต้องแก้ไข สิ่งนี้ดูเหมือนจะไม่ใช่ปัญหาในโบรสเซอร์ "สมัยใหม่" แต่นี่เป็นปัญหาที่ฉันพบดังนั้นโปรดตรวจสอบประสิทธิภาพข้ามเบราว์เซอร์

ตัวอย่างเช่นฉันค้นพบว่าใน IE ก่อนหน้า 9 colSpan ถูกตั้งค่าสำหรับ TD ทั้งหมดในตารางดังนั้นเซลล์ใด ๆ จึงมีค่า colspan ที่ซ่อนอยู่เป็น 1

ดังนั้นหากคุณกำหนดเป้าหมาย "TD ใด ๆ ที่มีแอตทริบิวต์ colspan" แสดงว่าคุณใช้ใน webdoc ของคุณแม้แต่ td ที่ไม่มีชุดแอตทริบิวต์ colspan เช่น TD ใด ๆ ที่เป็นเซลล์เดียวก็จะได้รับสไตล์ css IE น้อยกว่า 9 โดยทั่วไปจะจัดรูปแบบให้ทั้งหมด!

เหตุผลเดียวที่ต้องกังวลเกี่ยวกับเรื่องนี้คือผู้ใช้ XP ที่เหลือทั้งหมดที่ไม่สามารถอัปเกรดเหนือ IE8 ได้

ตัวอย่างเช่นฉันมีกลุ่มตารางที่เนื้อหาอาจเปลี่ยนจากจุดสิ้นสุดไปยังจุดสิ้นสุดโดยปล่อยให้เซลล์ว่างจาก 1 ถึง 7 เซลล์ว่างในตอนท้ายหรือตอนต้น

ฉันต้องการใช้สีกับเซลล์ว่างใด ๆ ในตอนท้ายหรือจุดเริ่มต้นโดยใช้แอตทริบิวต์ colspan การใช้สิ่งต่อไปนี้จะไม่ทำงานใน IE ที่น้อยกว่า 9

#my td[colspan] {background-color:blue;}

... TD ทั้งหมดจะมีสไตล์ (ตลกดีเนื่องจากการจัดแต่งทรงผมแอตทริบิวต์ตามเงื่อนไขนั้นดีกว่าใน IE แต่ฉันพูดนอกเรื่อง ...

การใช้สิ่งต่อไปนี้จะใช้ได้กับทุกเบราว์เซอร์เมื่อฉันตั้งค่า colspan เป็น 'single' สำหรับเซลล์เดี่ยว / TD ใด ๆ ที่ฉันต้องการรวมไว้ในโครงร่างสไตล์อย่างไรก็ตามมันเป็น 'แฮ็ก' และจะไม่ตรวจสอบอย่างถูกต้อง ...

#my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */
#my td[colspan="2"] {background-color:blue;}
#my td[colspan="3"] {background-color:blue;}
#my td[colspan="4"] {background-color:blue;}
#my td[colspan="5"] {background-color:blue;}
#my td[colspan="6"] {background-color:blue;}
#my td[colspan="7"] {background-color:blue;}

อีกวิธีหนึ่งคุณควรแก้ไขปัญหาได้อย่างเหมาะสมยิ่งขึ้นโดยใช้การจัดรูปแบบตามเงื่อนไขโดยใช้ "if lt IE 9" เพื่อแทนที่ มันจะเป็นวิธีที่ถูกต้องในการดำเนินการนี้เพียงจำไว้ว่าคุณต้องซ่อน "css ที่สร้างอย่างถูกต้อง" จาก IElt9 ในกระบวนการนี้และฉันคิดว่าวิธีเดียวที่เหมาะสมในการทำเช่นนั้นคือการใช้สไตล์ชีตที่เลือก

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

(btw colspan เพิ่งเกิดขึ้นไม่ได้อยู่ในข้อกำหนด css [ณ css3] ดังนั้นตัวอย่างนี้จึงไม่มีข้อผิดพลาดในการตรวจสอบความถูกต้อง)