บทบาทของ CSS [attribute="value"] Selector

ใช้ Selector [attribute="value"] เพื่อเลือกอิลิเมนต์ที่มีแอตทริบิวต์และค่าที่ระบุอย่างแม่นยำ

ตัวอย่างโค้ด

ลองรันโค้ดด้านล่างเพื่อทดสอบ CSS [attribute="value"] Selector โดยใช้แอตทริบิวต์ rel:

<!DOCTYPE html>
<html>
<head>
  <style>
    a[rel="nofollow"] {
      border: 3px solid orange;
    }
  </style>
</head>
<body>
  <a href="https://qries.com/What-is-Uber-s-business-model-and-how-does-it-compare-with-Ola-s-model-in-India" rel="nofollow">Uber's Business Model</a><br><br>
  <a href="https://www.qries.com/How-does-share-market-work-in-India" rel="noreferrer">Share Market</a>
</body>
</html>

ผลลัพธ์: ลิงก์แรกมีขอบสีส้มเพราะ rel="nofollow" ตรงกันพอดี ลิงก์ที่สอง rel="noreferrer" ไม่ตรง ต่างจาก [rel|="nofollow"] ที่จะตรงกับ nofollow-something ด้วย