如何设置CSS角色的样式

Question

在以下HTML

中

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

可以通过CSS中的#content访问ID。我如何访问role="main"。

Answer 1

使用CSS属性选择器：

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

e.g：

div[role=main]

Answer 2

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

Answer 3

当然可以在这种模式下进行：

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

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

Answer 4

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

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

之前的答案没有错，但他们依赖于您使用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>

Answer 5

关注此主题以获取更多信息

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

并学习css属性选择器

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

Answer 6

请使用：

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

Answer 7

我们可以使用

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