Як стилізувати роль CSS

У наступному HTML

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

ідентифікатор можна отримати через #contentCSS. Як отримати доступ role="main".

Використовуйте селектори CSS-атрибутів:

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

наприклад:

div[role=main]

Доступ до нього має бути таким: #content[role="main"]

Впевнені, що ви можете робити в цьому режимі:

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

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

Найкоротший спосіб написати селектор, який отримує доступ до конкретного діла, - це просто використовувати

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

Попередні відповіді не є помилковими, але вони покладаються на вас, використовуючи або div, або використовуючи певний ідентифікатор. З цим селектором ви зможете мати всі види шаленої розмітки, і вона все одно спрацює, і ви уникнете проблем із специфікою.

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

Дотримуйтесь цієї теми для отримання додаткової інформації

Вибір атрибутів CSS: застосувати клас, якщо спеціальний атрибут має значення? Також, чи буде це працювати в IE7 +?

і вивчити селектор атрибутів css

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

будь ласка, використовуйте:

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

ми можемо використовувати

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