如何CSS樣式作用

Question

以下HTML

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

的ID可以通過#content在CSS進行訪問。我如何訪問role="main"。

Answer 1

使用CSS屬性選擇：

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

如：

div[role=main] 

Answer 2

訪問它像這應該工作：#content[role="main"]

Answer 3

當然，你可以在此模式下做到：

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

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

Answer 4

關注該線程更多信息

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

和學習的CSS屬性選擇

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

Answer 5

請使用：

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

Answer 6

寫訪問特定的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>