Cách tạo kiểu vai trò CSS

Trong HTML sau

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

id có thể được truy cập thông qua #contenttrong CSS. Làm cách nào để truy cập role="main".

Sử dụng bộ chọn thuộc tính CSS:

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

ví dụ:

div[role=main]

Truy cập nó như thế này sẽ hoạt động: #content[role="main"]

Chắc chắn bạn có thể làm ở chế độ này:

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

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

Cách ngắn nhất để viết một bộ chọn truy cập vào div cụ thể đó là chỉ cần sử dụng

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

Các câu trả lời trước không sai, nhưng chúng dựa vào việc bạn sử dụng div hoặc sử dụng id cụ thể. Với bộ chọn này, bạn sẽ có thể có tất cả các loại đánh dấu điên rồ và nó vẫn hoạt động và bạn tránh được các vấn đề về tính cụ thể.

[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>

theo dõi chuỗi này để biết thêm thông tin

Bộ chọn thuộc tính CSS: Áp dụng lớp nếu thuộc tính tùy chỉnh có giá trị? Ngoài ra, nó sẽ hoạt động trong IE7 +?

và tìm hiểu bộ chọn thuộc tính css

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

vui lòng sử dụng:

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

chúng ta có thể sử dụng

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