Как стилизовать роль CSS

Question

Как стилизовать роль CSS

В следующем HTML

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

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

411 7

css

7 ответов:

Comments

Ничего не найдено.

sync · Accepted Answer · 2012-10-15 12:27:28

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

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

например:
div[role=main]

pduersteler · Accepted Answer · 2012-10-15 12:27:46

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

Alessandro Minoccheri · Accepted Answer · 2014-05-12 17:21:23

конечно, вы можете сделать в этом режиме:
 #content[role="main"]{
       //style
    }
http://www.w3.org/TR/selectors/#attribute-selectors

Patrick · Accepted Answer · 2016-05-26 11:52:51

самый короткий способ написать селектор, который обращается к этому конкретному 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>

Chandra Sekhar Walajapet · Accepted Answer · 2017-05-23 14:54:50

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

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

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

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

Saeed Py · Accepted Answer · 2013-12-20 16:24:05

пожалуйста, используйте :
 #content[role=main]{
   your style here
}

shrawan · Accepted Answer · 2018-04-26 17:48:09

можно использовать

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