วิธีกำหนดสไตล์บทบาท CSS

ใน HTML ต่อไปนี้

<div id="content" role="main">

รหัสสามารถเข้าถึงได้#contentใน CSS ฉันจะเข้าถึงrole="main"ไฟล์.

ใช้ตัวเลือกแอตทริบิวต์ CSS:

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

เช่น:

div[role=main]

การเข้าถึงเช่นนี้ควรใช้งานได้: #content[role="main"]

แน่นอนว่าคุณสามารถทำได้ในโหมดนี้:

 #content[role="main"]{
       //style
    }

http://www.w3.org/TR/selectors/#attribute-selectors

วิธีที่สั้นที่สุดในการเขียนตัวเลือกที่เข้าถึง div นั้นคือการใช้

[role=main] {
  /* CSS goes here */
}

คำตอบก่อนหน้านี้ไม่ผิด แต่ขึ้นอยู่กับคุณโดยใช้ div หรือใช้ id เฉพาะ ด้วยตัวเลือกนี้คุณจะสามารถมีมาร์กอัปที่บ้าคลั่งได้ทุกประเภทและยังคงใช้งานได้และหลีกเลี่ยงปัญหาเกี่ยวกับความจำเพาะ

[role=main] {
  background: rgba(48, 96, 144, 0.2);
}
div,
span {
  padding: 5px;
  margin: 5px;
  display: inline-block;
}

<div id="content" role="main">
  <span role="main">Hello</span>
</div>

ติดตามหัวข้อนี้เพื่อดูข้อมูลเพิ่มเติม

CSS Attribute Selector: ใช้คลาสหากแอตทริบิวต์ที่กำหนดเองมีค่า? มันจะทำงานใน IE7 + หรือไม่?

และเรียนรู้ตัวเลือกแอตทริบิวต์ css

http://www.w3schools.com/css/css_attribute_selectors.asp

โปรดใช้ :

 #content[role=main]{
   your style here
}

เราสามารถใช้

 element[role="ourRole"] {
    requried style !important; /*for overriding the old css styles */
    }