伪类选择器
选择第几个元素
<style>
/* 类num后代li的第1个 */
.num li:first-child {
color: red;
}
/* 类num后代li的最后一个 */
.num li:last-child {
color: red;
}
/* 类num后代li的第3个 */
/* nth-child(n) n就是第几个 */
.num li:nth-child(3) {
color: blue;
}
</style>
<ul class="num">
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
<li>66</li>
</ul>
选择奇数项与偶数项
<style>
/*类onOrTwo后代li 第奇数项选中 */
.oneOrTwo li:nth-child(2n+1) {
color: red;
}
/*类onOrTwo后代li 第偶数项选中 */
.oneOrTwo li:nth-child(2n) {
color: blue
}
</style>
<ul class="oneOrTwo">
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
<li>66</li>
</ul>
超链接相关
<style>
/* 未访问的颜色 */
a:link {
color: red;
}
/* 鼠标悬停的颜色 */
a:hover {
color: purple;
}
/* 访问过的颜色 */
a:visited {
color: green;
}
/* 点击鼠标不放的颜色 */
a:active {
color: blue;
}
</style>
<a href="#">这是一个测试链接</a>
标签:伪类,color,li,nth,num,red,child,选择器,CSS
From: https://www.cnblogs.com/SYF--BLOG/p/17297903.html