午後、ビジネスニーズでたまたまこれらのCSSセレクターを使っていたので、詳しく書きました。
まず、これらのセレクターが呼び出されます疑似クラスセレクター(記号は:) 疑似要素セレクター(マークは::)
コード:
html:
<ul>
<li>一曲二三里</li>
<li>烟村四五家</li>
<li>亭台六七座</li>
<li>八九十枝花</li>
</ul>
css:
//li的第一个孩子
li:first-child {
color: pink;
}
//li的最后一个孩子
li:last-child {
color: purple;
}
//后面括号里是几那么就是第几个孩子
li:nth-child(2) {
color: skyblue;
font-size: 12px;
}
li:nth-child(3) {
color: green;
font-size: 12px;
}
//li的所有偶数项
li:nth-of-type(even)
//li的所有奇数项
li:nth-of-type(odd)