CSS伪类

UI伪类
元素处于某种状态时应用样式

1. 伪链接类
   a:link{color:black;} 链接的颜色本是黑色
   a:visited{color:grey;} 链接被访问过后的颜色为灰色
   a:hover{text-decoration:none;} 鼠标指向链接时无下划线
   a:active{color:red;} 正在访问的链接为红色

2. :focus伪类
   input:focus{border:blue 1px solid;} 当光标位于input输入框时，输入框变为蓝色边框

3. :target伪类
   #id1:target{background:grey;} id1作为某个链接的终点，当点击链接转向ID为id1的元素时，该元素变为灰色背景

---

结构化伪类

元素具有某种结构化的关系（一组元素的第一个或最后一个）时，为该元素应用样式

1. :first-child和:last-child
   
   
   
   1. 第一个元素
   
   
   2. 第二个元素
   
   
   3. 第三个元素
   
   
   
   则：ol.cwc:first-child{color:red} “第一个元素”会变红色
2. :nth-child
   同上例：ol.cwc:nth-child(2){color:blue} “第二个元素”会变蓝色

---

伪元素

1. ::first-letter、::first:line、::before、::after
   栗子：
   

   是一个

   
   p.age::first-letter{color:red;} 第一个字变红
   p.age::first-line{background:gery;} 第一行背景变灰
   p.age::before{content:"陈大春";}
   p.age::after{content:"大帅哥";}
   效果：陈大春是一个大帅哥