2006.09
19

CSS 3 selectors examples

作者原文: CSS 3 selectors explained

CSS 3可以这样选中标签:
<div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="content-secondary"></div>
<div id="tertiary-content"></div>
<div id="nav-secondary"></div>

选中nav开头的标签: div#nav-primary, div#nav-secondary
div[id^="nav"] { background:#ff0; }

选中primary结尾的标签: div#nav-primary, div#content-primary
div[id$="primary"] { background:#ff0; }

选中包含content的标签: div#content-primary, div#content-secondary, div#tertiary-content
div[id*="content"] { background:#ff0; }

:target表示URL为http://www.example.com/index.html#content-primary时标签才被选中
div#content-primary:target { outline:1px solid #300; }

p:nth-child(n)代表选中第n个p标签
tr:nth-child(2n+1) {
background-color: red;
}
tr:nth-child(2n) {
background-color: blue;
}