Как стиль CSS-роли

В следующем HTML

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

Доступ к id можно получить через #content в CSS. Как получить доступ к role="main".

Ответ 1

Используйте селектор атрибутов CSS:

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

например:.

div[role=main]

Ответ 2

Доступ к нему, как это должно работать: #content[role="main"]

Ответ 3

Конечно, вы можете сделать в этом режиме:

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

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

Ответ 4

следить за этой веткой для получения дополнительной информации

Селектор атрибутов CSS: применить класс, если значение имеет собственный атрибут? Кроме того, будет ли он работать в IE7 +?

и узнайте селектор атрибутов css

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

Ответ 5

Самый короткий способ написать селектор, который обращается к этому конкретному div, - это просто использовать

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

Ответ 6

используйте:

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