常用的伪类选择器

链接伪类选择器

主要有以下几类：

a:link 未访问链接时属性 a:visited 访问后的属性 a:hover 鼠标放上去时的属性 a:active 点击后的属性

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

代码示例：

a:link {color: red}
a:visited; {color: yellow}
a:hover {color: blue}
a:active {color: orange}
<a href='#'>   这是一个a标签  </a>

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

结构伪类选择器

:first-child 第一个节点 :last-child 最后一个节点 :nth-child(n) 顺数第几个节点（2n则表示顺数所有偶数位节点） :nth-last-child（n）逆着数第几个节点（2n表示逆数所有偶数节点）

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

代码示例：

   li:first-child {color: red }
   li:last-child {color: red}
   li:nth-child(2n) {color: red}
   li:nth-last-child(2n) {color: red}
 <ol>
  <li> 第一个节点 </li>
  <li>第二个节点</li>
  <li>第三个节点</li>
  <li>第四个节点</li>
   <li>第五个节点</li>
   </ol>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

目标伪类选择器

:target

• 1

• 1

代码示例

 :target { color: red;  }
 <a href='#lianjie1'> 跳转链接</a>
 <h1 id='lianjie'>target</h1>

• 1
• 2
• 3

• 1
• 2
• 3