1、属性选择器
属性选择器，可以根据元素特定的属性来选择元素，这样就不用借助 类 或者 id选择器。
E [ att ] 选择具有 att 属性的 E 元素 例如：input [ value ]
E [ att = ‘val‘ ] 选择具有 att 属性且属性值等于 val 的 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元素
注意：类选择器，属性选择器，伪类选择器 权重都是 10
2、结构伪类选择器（一般用于选择父级里面的第几个孩子）
父元素 E:first-child 父元素中的第一个子元素 E
父元素 E:last-child 父元素中的最后一个子元素 E
父元素 E:nth-child( n ) 父元素中的第 N 个子元素 E
注意：
ul :first-child{ color:pink; } // 选择 ul 下的第一个子元素（ 第一个子元素可以使 div，p，span任何子元素）
ul li:first-child{ color: pink; } // 选择 ul 下的第一个元素名是 li 的子元素
nth-child( n ) 注意点：（n 可以是数字，关键字和公式）
数字：选择第 n 个子元素，里面数字从 1 开始
关键字： even 偶数，odd 奇数
ul li:nth-child( even ) // 选择 ul 中所有 偶数行的 li 子元素
公式：常见公式如下（如果 n 是公式，则从 0 开始计算，但是第 0 个元素 或者超出了元素的个数会被忽略）
ul li:nth-child( n ) // 从 0 开始 每次加1 往后计算，相当于选择了所有的孩子 这里面必须是 n 不能是其他字母
偶数：2n 奇数：2n+1 5的倍数：5n 从第5个开始（包含第5个）到最后：n+5 前5 个（包含第5 个）：-n + 5
E:first-of-type：指定类型 E 的第一个
E:last-of-type：指定类型 E 的最后一个
E:nth-of-type( n )：指定类型 E 的第 n 个
区别：（两种相反的查找模式）
1. nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第 n 个孩子，然后看看是否和 E 匹配
2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配 E ，然后再根据 E 找第 n 个孩子
3. 伪元素选择器（重点）
伪元素选择器 可以帮助我们 利用 css 创建新标签元素，而不需要 HTML 标签，从而简化 HTML 结构
:: before 在元素内部的前面插入内容
:: after 在元素内部的后面 插入内容
注意：
before 和 after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树种是找不到的，所以我们称为伪元素
语法：element::before{ }
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
伪元素选择器 和 标签选择器一样，权重为 1
原文地址：https://www.cnblogs.com/qtbb/p/11737923.html