属性选择器
选择符简介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元素类选择器、属性选择器、伪类选择器，权重为10 结构伪类选择器
选择符简介E:first-child匹配父元素中的第一个元素EE:last-child匹配父元素中的最后一个元素EE:nth-child（n）匹配父元素的第n个子元素EE:first-of-type指定类型E的第一个E:last-of-type指定类型E的最后一个E:nth-of-type(n)指定类型E的第n个nth-child(n) ● n可以使数字、关键字和公式 ● n如果是数字，就是选择第几个 ● 常见的关键词有even偶数 odd奇数 ● 常见的公式如下（如果n是公式，则从0开始计算，但第0个元素或者超出了元素的个数会被忽略）
公式取值2n偶数2n+1奇数5n5 10 15…n+5从第5个开始（包含第五个）到最后-n+5前5个（包含第5个）注意：:nth-child(n)选择父元素里面的第n个标签，它不管里面的标签是否同一种类型 例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>测试</title> <style> /* div :nth-child(1) { background: coral; } */ /* div span:nth-child(1) { background: coral; } */ /* 这种写法无法选出“我是第二个” */ div span:nth-child(2) { background: coral; } /*这种写法才生效*/ </style> </head> <body> <div> <p>我是第一个</p> <span>我是第二个</span> <span>我是第三个</span> <span>我是第四个</span> </div> </body> </html>伪元素选择器
选择符简介::before在元素内部的前面插入内容::after在元素内部的后面插入内容注意： before和after必须有content属性 before在内容的前面，after在内容的后面 before和after创建一个元素，但是属于行内元素 在dom里面看不见创建的元素，由此称为伪元素 伪元素和标签选择器一样，权重为1
