如何设置CSS角色的样式

Question

在以下HTML中

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

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

Answer 1

使用CSS属性选择器:

例如:

div[role=main]

Answer 2

像这样访问它应该工作: #content[role="main"]

Answer 3

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

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

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

我们可以用

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