[13th-铁人赛]Day 7:Modern CSS 超详细新手攻略 - 伪类 Pseudo Classes

今天要来介绍的是Pseudo Classes，可以用来改变元素在某个状态下的样式，例如鼠标停留在button上时的样式变化，checkbox被选取时的样式等。

基本语法：

在选择器与pseudo-classes间透过冒号作连结

常用类别

1. first-child: 父元素内第一个子元素
2. first-of-type: 第一个出现在父元素下的该标签
3. last-child: 父元素内最後一个元素
4. last-of-type: 最後一个出现在父元素的该标签
5. nth-child(): 开头数来第n个子元素，n可以带入数字、奇偶数或是公式
6. nth-last-child(): 结尾数来第n个子元素，n可以带入数字、奇偶数或是公式
7. nth-of-type(): 属於该标签里开头数来第n个子元素，n可以带入数字、奇偶数或是公式
8. nth-last-of-type(): 属於该标签里结尾数来第n个子元素，n可以带入数字、奇偶数或是公式

-a tag

1. active: 被触发当下的样式
2. hover: 鼠标经过时的样式
3. visited: 被点击过的样式

-input

1. focus: 选择到该input时的样式

-radio/checkbox/option

1. checked: 被选择到的样式

Challenge