CSS rolü nasıl şekillendirilir

Aşağıdaki HTML'de

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

kimliğe #contentCSS aracılığıyla erişilebilir . Nasıl erişirim role="main".

CSS öznitelik seçicilerini kullanın:

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

Örneğin:

div[role=main]

Bu şekilde erişmek işe yaramalı: #content[role="main"]

Elbette bu modda yapabilirsiniz:

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

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

Belirli bir div'e erişen bir seçici yazmanın en kısa yolu,

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

Önceki cevaplar yanlış değil, ancak bir div veya belirli bir kimliği kullanarak size güveniyorlar. Bu seçiciyle, her türlü çılgın işaretlemeye sahip olacaksınız ve yine de işe yarayacak ve özgüllükle ilgili sorunlardan kaçınacaksınız.

[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>

daha fazla bilgi için bu konuyu takip edin

CSS Öznitelik Seçici: Özel özniteliğin değeri varsa sınıf uygulansın mı? Ayrıca IE7 + 'da çalışacak mı?

ve css özellik seçiciyi öğrenin

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

lütfen kullan :

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

kullanabiliriz

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