CSSロールをスタイルする方法

110

次のHTML

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

idは#contentCSS からアクセスできます。どうやってアクセスを行いますrole="main"。

css

— ラギング反射
ソース

187

CSS属性セレクターを使用します。

例えば：

div[role=main]

— 同期する
ソース

16

このようにアクセスするとうまくいくはずです： #content[role="main"]

— Pduersteler
ソース

13

もちろん、このモードで実行できます。

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

— アレッサンドロ・ミノッチェリ
ソース

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>

— パトリック
ソース

4

詳細については、このスレッドをフォローしてください

そしてCSS属性セレクターを学ぶ

— チャンドラ・セカール・ワラジャペット
ソース

1

使ってください：

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

— サイード
ソース

1

私たちは使うことができます

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

— シュラワン
ソース