css - 如何样式化 CSS 角色

Question

在以下 HTML

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

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

score 234 · Accepted Answer

使用 CSS 属性选择器：

例如：

div[role=main]

score 19 · Accepted Answer

19

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

于 2012-10-15T09:27:46.763 回答

score 18 · Accepted Answer

编写访问该特定 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>

score 16 · Accepted Answer

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

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

score 6 · Accepted Answer

我们可以用

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

score 4 · Accepted Answer

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

并学习 css 属性选择器

score 2 · Accepted Answer

2

请用：

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

于 2012-10-15T09:33:44.393 回答

7 回答 7