如何设置 CSS 角色的样式

How to style CSS role

提问by laggingreflex

In the following HTML

在下面的 HTML

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

the id can be accessed through #contentin CSS. How do I access role="main".

id 可以通过#contentCSS访问。我如何访问role="main".

回答by sync

Use CSS attribute selectors:

使用 CSS 属性选择器：

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

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

e.g.:

例如：

div[role=main]

回答by pduersteler

Accessing it like this should work: #content[role="main"]

像这样访问它应该有效： #content[role="main"]

回答by Alessandro Minoccheri

Sure you can do in this mode:

当然你可以在这种模式下做：

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

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

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

回答by Patrick

The shortest way to write a selector that accesses that specific div is to simply use

编写访问该特定 div 的选择器的最短方法是简单地使用

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

The previous answers are not wrong, but they rely on you using either a div or using the specific id. With this selector, you'll be able to have all kinds of crazy markup and it would still work and you avoid problems with specificity.

以前的答案没有错，但它们依赖于您使用 div 或使用特定 id。使用这个选择器，您将能够拥有各种疯狂的标记，它仍然可以工作，并且您可以避免特定性问题。

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

回答by Chandra Sekhar Walajapet

follow this thread for more information

关注此线程以获取更多信息

CSS Attribute Selector: Apply class if custom attribute has value? Also, will it work in IE7+?

CSS 属性选择器：如果自定义属性有价值，则应用类？另外，它可以在 IE7+ 中工作吗？

and learn css attribute selector

并学习 css 属性选择器

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

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

回答by Saeed

please use :

请用 ：

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

回答by shrawan

we can use

我们可以用

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