Jak projektować rolę CSS

Question

W poniższej HTML

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

identyfikator można uzyskać poprzez #content w CSS. Jak uzyskać dostęp do role="main".

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

np:

div[role=main] 

Answer 1

Zastosowanie CSS selektorów atrybutów #content[role="main"]

Answer 2

dostępu do niego jak to powinno działać:

Answer 3

Oczywiście można zrobić w tym trybie:

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

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

Answer 4

śledzić ten wątek, aby uzyskać więcej informacji

CSS Attribute Selector: Apply class if custom attribute has value? Also, will it work in IE7+?

i nauczyć selektor atrybutu css

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

Answer 5

użyj:

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

Answer 6

Najkrótsza droga napisać selektor, który uzyskuje dostęp do tej konkretnej div jest po prostu użyć

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

Dotychczasowe odpowiedzi nie są złe, ale opierają się one na ty przy użyciu div lub przy użyciu określonego identyfikatora. Za pomocą tego selektora będziesz mógł mieć wszystkie rodzaje zwariowanych znaczników i nadal będzie działać, a Ty unikniesz problemów ze specyfiką.

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