ระบุตัวเลือกแอททริบิวหลายตัวใน CSS

ไวยากรณ์สำหรับการทำสิ่งที่ชอบคืออะไร:

input[name="Sex" AND value="M"]

โดยทั่วไปฉันต้องการเลือกinputองค์ประกอบที่มีคุณสมบัติname="Sex"เช่นเดียวกับคุณลักษณะvalue="M":

<input type="radio" name="Sex" value="M" />

ไม่ควรเลือกองค์ประกอบดังต่อไปนี้:

<input type="radio" name="Sex" value="F" />

เรียบง่ายinput[name=Sex][value=M]น่ารักดี และเป็นจริงดีที่อธิบายไว้ในเอกสารมาตรฐาน :

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

ที่นี่ตัวเลือกตรงกับองค์ประกอบ SPAN ทั้งหมดที่มีคุณลักษณะ "hello" มีค่า "Cleveland" และมีคุณสมบัติ "goodbye" ที่มีค่า "Columbus" อย่างแน่นอน:

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

ในฐานะที่เป็นบันทึกด้านข้างการใช้เครื่องหมายอัญประกาศล้อมรอบค่าคุณลักษณะจำเป็นเฉพาะในกรณีที่ค่านี้ไม่ใช่ตัวระบุที่ถูกต้อง

การสาธิต JSFiddle

สำหรับการต่อข้อมูล:

input[name="Sex"][value="M"] {}

และสำหรับการรวมเป็น:

input[name="Sex"], input[value="M"] {}

ต่อเชื่อมตัวเลือกแอททริบิวต์:

input[name="Sex"][value="M"]

เพียงเพิ่มว่าไม่ควรมีช่องว่างระหว่างตัวเลือกและวงเล็บเปิด

td[someclass] 

จะทำงาน. แต่

td [someclass] 

จะไม่

[class*="test"],[class="second"] {
background: #ffff00;
}