伪类选择器，css盒子笔记

伪类选择器

主要有以下几类：

a:link    未访问链接时属性

a:visited 访问后的属性

a:hover   鼠标放上去时的属性

a:active  点击后的属性

代码示例：

a:link {color: red}

a:visited; {color: yellow}

a:hover {color: blue}

a:active {color: orange}

<a href="#">   这是一个a标签  </a>

结构伪类选择器

:first-child   第一个节点

 :last-child  最后一个节点

 :nth-child(n) 顺数第几个节点（2n则表示顺数所有偶数位节点）

 :nth-last-child（n）逆着数第几个节点（2n表示逆数所有偶数节点）

代码示例：

   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>

目标伪类选择器

 :target

代码示例

 :target { color: red;  }

 <a href="#lianjie1"> 跳转链接</a>

 <h1 id="lianjie">target</h1>

结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

 结构伪类选择器

选择器 功能描述 版本

E:last-child 选择父元素的倒数第一个子元素E，相当于E:nth-last-child(1) 3

E:nth-child(n) 选择父元素的第n个子元素，n从1开始计算 3

E:nth-last-child(n) 选择父元素的倒数第n个子元素，n从1开始计算 3

E:first-of-type 选择父元素下同种标签的第一个元素，相当于E:nth-of-type(1) 3

E:last-of-type 选择父元素下同种标签的倒数第一个元素，相当于E:nth-last-of-type(1) 3

E:nth-of-type(n) 与:nth-child(n)作用类似，用作选择使用同种标签的第n个元素 3

E:nth-last-of-type 与:nth-last-child作用类似，用作选择同种标签的倒数第一个元素 3

E:only-child 选择父元素下仅有的一个子元素，相当于E:first-child:last-child或E:nth-child(1):nth-