如何设置CSS角色的样式

110

在以下HTML中

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

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

css

— 滞后反射
source

187

使用CSS属性选择器：

例如：

div[role=main]

— 同步
source

16

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

— pduersteler
source

13

确保可以在此模式下执行以下操作：

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

— 亚历山德罗·米诺切里（Alessandro Minoccheri）
source

13

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

— 帕特里克
source

4

并学习CSS属性选择器

— 钱德拉·塞卡（Chandra Sekhar Walajapet）
source

1

请用：

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

— 赛义德
source

1

我们可以用

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

— 史拉旺
source