ตัวเลือกคุณสมบัติ CSS

ตั้งรูปแบบสำหรับองค์ประกอบ HTML ที่มีคุณสมบัติที่เฉพาะ

เราสามารถตั้งรูปแบบสำหรับองค์ประกอบ HTML ที่มีคุณสมบัติหรือค่าคุณสมบัติที่เฉพาะ

CSS [attribute] โซ่เลือก

[attribute] ใช้เลือกรายการที่มีคุณสมบัติที่กำหนด

ตัวอย่างดังนี้จะเลือกรายการที่มีคุณสมบัติ target ทั้งหมด

ตัวอย่าง

a[target] {
  background-color: yellow;
}

ทดลองด้วยตัวเอง

CSS [attribute="value"] ใช้เลือกรายการ

[attribute="value"] ใช้เลือกรายการที่มีคุณสมบัติและค่าที่กำหนด

ตัวอย่างดังนี้จะเลือกรายการที่มีคุณสมบัติ target="_blank" ของ <a> ทั้งหมด

ตัวอย่าง

a[target="_blank"] { 
  background-color: yellow;
}

ทดลองด้วยตัวเอง

CSS [attribute~="value"] ใช้เลือกรายการ

[attribute~="value"] ใช้เลือกรายการที่มีคุณสมบัติที่มีคำศัพท์ที่กำหนด

ตัวอย่างดังนี้จะเลือกรายการที่มีคุณสมบัติ title ที่มีคำศัพท์ "flower"

ตัวอย่าง

[title~="flower"] {
  border: 5px solid yellow;
}

ทดลองด้วยตัวเอง

ตัวอย่างที่กล่าวข้างต้นจะตรงกับรายการที่มีคุณสมบัติตามต่อไปนี้: title="flower" หรือ title="summer flower" หรือ title="flower new" แต่ไม่ตรงกับ: title="my-flower" หรือ title="flowers"

CSS [attribute|="value"] ใช้เลือกรายการ

[attribute|="value"] ใช้เลือกรายการที่มีคุณสมบัติที่มีค่าเริ่มต้นด้วยค่าที่กำหนด

ตัวอย่างดังนี้เลือกแถวที่มีค่า class ที่เริ่มต้นด้วย "top":

หมายเหตุ：ค่าต้องเป็นคำศัพท์เต็มหรือคำศัพท์เดี่ยวๆ อย่างเช่น class="top" หรือตามด้วยสัญลักษณ์เช่น class="top-text"。

ตัวอย่าง

[class|="top"] {
  background: yellow;
}

ทดลองด้วยตัวเอง

ตัวเลือก CSS [attribute^="value"]

[attribute^="value"] ตัวเลือกใช้เลือกแถวที่มีค่า attribute ที่เริ่มต้นด้วยค่าที่กำหนด。

ตัวอย่างดังนี้เลือกแถวที่มีค่า class ที่เริ่มต้นด้วย "top":

คำแนะนำ:ค่าไม่จำเป็นต้องเป็นคำที่เต็มทั้งคำ!

ตัวอย่าง

[class^="top"] {
  background: yellow;
}

ทดลองด้วยตัวเอง

ตัวเลือก CSS [attribute$="value"]

[attribute$="value"] ตัวเลือกใช้เลือกแถวที่มีค่า attribute ที่สิ้นสุดด้วยค่าที่กำหนด。

ตัวอย่างดังนี้เลือกแถวที่มีค่า class ที่สิ้นสุดด้วย "test":

คำแนะนำ:ค่าไม่จำเป็นต้องเป็นคำที่เต็มทั้งคำ!

ตัวอย่าง

[class$="test"] {
  background: yellow;
}

ทดลองด้วยตัวเอง

ตัวเลือก CSS [attribute*="value"]

[attribute*="value"] ตัวเลือกใช้เลือกแถวที่มีค่า attribute ที่มีคำที่กำหนดในตัวเลือก。

ตัวอย่างดังนี้เลือกแถวที่มีค่า class ที่มี "te":

คำแนะนำ:ค่าไม่จำเป็นต้องเป็นคำที่เต็มทั้งคำ!

ตัวอย่าง

[class*="te"] {
  background: yellow;
}

ทดลองด้วยตัวเอง

ตั้งรูปแบบฟอร์ม

ถ้าต้องการตั้งรูปแบบฟอร์มที่ไม่มี class หรือ id อัตรายึดจะมีประโยชน์มาก:

ตัวอย่าง

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

ทดลองด้วยตัวเอง

คำแนะนำ:โปรดเข้าเว็บไซต์ของเรา ตัวเรียน CSS ฟอร์มเพื่อได้รับความรู้เพิ่มเติมเกี่ยวกับการตั้งรูปแบบฟอร์มด้วย CSS。

เลือกตัว CSS ทั้งหมดของอัตรายึด

เลือกตัว ตัวอย่าง อธิบายตัวอย่าง
[attribute] [target] เลือกแถวที่มีค่า属性 target。
[attribute=value] [target=_blank] เลือกแถวที่มีค่า属性 target="_blank"。
[attribute~=value] [title~=flower] เลือกแถวที่มีค่า属性 title ที่มีคำ "flower"。
[attribute|=value] [lang|=en] เลือกแถวที่มีค่า属性 lang ที่เริ่มต้นด้วย "en"。
[attribute^=value] a[href^="https"] เลือกแถว <a> ที่มีค่า属性 href ที่เริ่มต้นด้วย "https"。
[attribute$=value] a[href$=".pdf"] เลือกแถว <a> ที่มีค่า属性 href ที่สิ้นสุดด้วย ".pdf"。
[attribute*=value] a[href*="codew3c"] เลือกทุก <a> อิเล็กทรอนิกที่มีค่า href ที่มีชุดตัวอักษร "codew3c"

การอ่านเพิ่มเติม

หนังสือเสริม:CSS การเรียงลำดับของโซ่เลือกแบบ attribute