属性选择器
属性选择器可以根据元素特定的属性来选择元素，这样就可以不用借助于类或者id选择器了。
| 选择符 |
简介 |
| E[att] |
选择具有 att 属性的 E 元素 |
| E[att="val"] |
选择具有 att 属性且属性值等于 val 的 E 元素 |
| E[att^="val"] |
匹配具有 att 属性且以 val 开头的 E 元素 |
| E[att$="val"] |
匹配具有 att 属性且值以 val 结尾的 E 元素 |
| E[att*="val"] |
匹配具有 att 属性且值中含有 val 的 E 元素 |
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 300px;
height: 300px;
}
img[alt^="1"] {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img src="https://gravatar.loli.net/avatar/caa50e6e1d3538931cdbe4bf306f6c30" alt="12">
<img src="https://gravatar.loli.net/avatar/caa50e6e1d3538931cdbe4bf306f6c30" alt="123">
<img src="https://gravatar.loli.net/avatar/caa50e6e1d3538931cdbe4bf306f6c30" alt="1234">
<img src="https://gravatar.loli.net/avatar/caa50e6e1d3538931cdbe4bf306f6c30" alt="666">
</body>
</html>
效果：
结构伪类选择器
结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁
| 选择符 |
简介 |
| E:first-child |
匹配父元素中的第一个子元素 E |
| E:last-child |
匹配父元素中最后一个 E 元素 |
| E:nth-child() |
匹配父元素中的第 n 个子元素 E |
| E:first-of-type |
指定类型 E 中的第一个 |
| E:last-of-type |
指定类型 E 中的最后一个 |
| E:nth-of-type() |
指定类型 E 的第 n 个 |
nth-child(n) 的使用方法：
- n可以是数字，关键字和公式
- n如果是数字，就是选择第n个子元素，里面数字从1开始
- n可以是关键字，even偶数，odd 奇数
- n可以是公式：常见的公式如下
| 公式 |
取值 |
| 2n |
偶数 |
| 2n+1 |
奇数 |
| 5n |
5 10 15 .... |
| n+5 |
从5开始的数，递增 |
| -n+5 |
从5开始的数，递减到0 |
nth-child 和 nth-of-type 的区别
· nth0-child 对父元素里面所有子代元素进行排序选择（序号固定）先找到第n个子元素，然后检查是否和E匹配
· nth-of-type 对父元素里面指定子元素进行排序选择，先去匹配E，然后在根据E寻找第n个子元素。
发表回复
虽然但是，首页开屏见这文章的头图是我一朋友现在的头像就很奇妙）
算了，继续看文章去了