Jak stylizować rolę CSS

W poniższym HTML

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

do id można uzyskać dostęp przez #contentCSS. Jak uzyskać dostęp role="main".

Użyj selektorów atrybutów CSS:

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

na przykład:

div[role=main]

Dostęp do niego w ten sposób powinien działać: #content[role="main"]

Jasne, że możesz to zrobić w tym trybie:

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

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

Najkrótszym sposobem napisania selektora, który ma dostęp do tego konkretnego elementu div, jest po prostu jego użycie

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

Poprzednie odpowiedzi nie są błędne, ale polegają na tym, że używasz albo elementu div, albo określonego identyfikatora. Dzięki temu selektorowi będziesz mógł mieć wszystkie rodzaje szalonych znaczników, a on nadal będzie działał i unikniesz problemów ze szczegółowością.

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

śledź ten wątek, aby uzyskać więcej informacji

Selektor atrybutów CSS: Zastosować klasę, jeśli atrybut niestandardowy ma wartość? Czy będzie działać w IE7 +?

i poznaj selektor atrybutu CSS

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

proszę użyć :

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

możemy użyć

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