Come modellare il ruolo CSS

Nel seguente HTML

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

è possibile accedere all'id tramite #contentCSS. Come accedo a role="main".

Utilizza i selettori di attributi CSS:

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

per esempio:

div[role=main]

Accedervi in ​​questo modo dovrebbe funzionare: #content[role="main"]

Certo che puoi fare in questa modalità:

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

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

Il modo più breve per scrivere un selettore che accede a quel div specifico è semplicemente usare

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

Le risposte precedenti non sono sbagliate, ma si basano sull'utilizzo di un div o sull'id specifico. Con questo selettore, sarai in grado di avere tutti i tipi di markup folli e funzionerebbe comunque ed eviterai problemi con la specificità.

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

segui questo thread per ulteriori informazioni

Selettore attributi CSS: applicare la classe se l'attributo personalizzato ha un valore? Inoltre, funzionerà in IE7 +?

e impara il selettore di attributi CSS

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

si prega di utilizzare :

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

possiamo usare

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