So gestalten Sie die CSS-Rolle

Im folgenden HTML

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

Auf die ID kann über #contentCSS zugegriffen werden . Wie greife ich auf role="main".

Verwenden Sie CSS-Attributselektoren:

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

z.B:

div[role=main]

Der Zugriff darauf sollte funktionieren: #content[role="main"]

Sicher können Sie in diesem Modus Folgendes tun:

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

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

Der kürzeste Weg, einen Selektor zu schreiben, der auf dieses bestimmte Div zugreift, ist die einfache Verwendung

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

Die vorherigen Antworten sind nicht falsch, aber sie hängen davon ab, dass Sie entweder ein div oder die spezifische ID verwenden. Mit diesem Selektor können Sie alle Arten von verrückten Markups erstellen, und es würde immer noch funktionieren, und Sie vermeiden Probleme mit der Spezifität.

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

Folgen Sie diesem Thread für weitere Informationen

CSS-Attributauswahl: Klasse anwenden, wenn ein benutzerdefiniertes Attribut einen Wert hat? Funktioniert es auch in IE7 +?

und lernen CSS-Attribut-Selektor

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

benutzen Sie bitte :

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

wir können benutzen

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