Bagaimana gaya peran CSS

Di HTML berikut

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

id dapat diakses melalui #contentCSS. Bagaimana cara mengakses role="main".

Gunakan pemilih atribut CSS:

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

misalnya:

div[role=main]

Mengaksesnya seperti ini seharusnya berhasil: #content[role="main"]

Tentu Anda dapat melakukannya dalam mode ini:

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

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

Cara terpendek untuk menulis selektor yang mengakses div tertentu adalah dengan menggunakan

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

Jawaban sebelumnya tidak salah, tetapi mereka bergantung pada Anda menggunakan div atau menggunakan id tertentu. Dengan pemilih ini, Anda akan dapat memiliki semua jenis markup gila dan itu akan tetap berfungsi dan Anda menghindari masalah dengan kekhususan.

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

ikuti utas ini untuk informasi lebih lanjut

Pemilih Atribut CSS: Terapkan kelas jika atribut khusus memiliki nilai? Juga, apakah itu akan bekerja di IE7 +?

dan pelajari pemilih atribut css

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

mohon gunakan :

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

kita bisa menggunakan

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