จะเลือกป้ายกำกับสำหรับ =“ XYZ” ใน CSS ได้อย่างไร

HTML:

<label for="email">{t _your_email}:</label>

CSS:

label {
  display: block;
  width: 156px;
  cursor: pointer;
  padding-right: 6px;
  padding-bottom: 1px;
}

ฉันต้องการเลือกป้ายกำกับตามคุณลักษณะ 'สำหรับ' เพื่อเปลี่ยนแปลงเค้าโครง

ตัวเลือกจะเป็นlabel[for=email]ดังนั้นใน CSS:

label[for=email]
{
    /* ...definitions here... */
}

... หรือใน JavaScript โดยใช้ DOM:

var element = document.querySelector("label[for=email]");

... หรือใน JavaScript โดยใช้ jQuery:

var element = $("label[for=email]");

มันเป็นตัวเลือกแอตทริบิวต์ โปรดทราบว่าเบราว์เซอร์บางตัว (เช่นเวอร์ชัน IE <8 เป็นต้น) อาจไม่รองรับตัวเลือกคุณลักษณะ เพื่อรองรับเบราว์เซอร์รุ่นเก่าเช่น IE6 และ IE7 คุณจะต้องใช้คลาส (อย่างดีหรือวิธีโครงสร้างอื่น ๆ ) เศร้า

(ฉันสมมติว่าเทมเพลต{t _your_email}จะกรอกข้อมูลในฟิลด์ด้วยid="email"หากไม่ใช้คลาสแทน)

โปรดทราบว่าหากค่าของแอททริบิวต์ที่คุณเลือกไม่ตรงกับกฎสำหรับตัวระบุ CSS (เช่นหากมีช่องว่างหรือวงเล็บในหรือเริ่มต้นด้วยตัวเลขเป็นต้น) คุณต้องใส่เครื่องหมายอัญประกาศ มูลค่า:

label[for="field[]"]
{
    /* ...definitions here... */
}

พวกเขาสามารถเป็นคำพูดเดียวหรือสองครั้ง

หากเนื้อหาเป็นตัวแปรจำเป็นต้องเชื่อมต่อเนื้อหานั้นด้วยเครื่องหมายคำพูด มันใช้งานได้สำหรับฉัน แบบนี้:

itemSelected (id: number) {
    console.log ('label ประกอบด้วย', document.querySelector ("label [สำหรับ = '" + id + "']"));
}