1前言目前在做IFE练习，初步学习了CSS内容，所以做个总结。这篇博文主要介绍CSS中选择器的概念。2选择器类型2.1类型概述CSS选择器可分为以下几类：S1简单选择器A1元素选择器A2类选择器A3ID选择器A4通用选择器S2属性选择器A1简单属性选择器A2具体属性值A3部分属性值（子串取值）attributeselector)S3伪类和伪元素选择器S4DerivedselectorA1h1,p{xxx}:h1和p同时使用样式规则，它们是搭配S5combinatorA1.xxx。yyy：后代选择器，在.xxx元素的后代中选择包含.yyy类的元素；A2直接子元素选择器A>B；A3AdjacentsiblingselectorA+BA4OrdinarysiblingselectorA~B2.2Classselectors（注意点）S1generalclassselector.xxx：选择所有包含xxx类属性的HTML元素；S2元素特定类选择器p.xxx：选择包含xxx类属性的p元素，但不会选择包含xxx类属性的p元素S3多类选择器HTML结构A1.xxx：将应用于p和aStyle；A2.xxx.yyy：样式将应用于包含xxx&yyy的元素，这里是p和span；A3P.xxx.yyy：样式只会应用于同时包含xxx&yyy的p元素，这里是p元素A2id属性的值是唯一的，而class属性的值是可以重复的A3一般在实际开发中，id是给js用的，class是给css用的A4元素应该按照“它们是什么”来命名”，而不是“whattheylooklike”2.3属性选择器（注意点）S1简单属性选择A1a[class/href]：选择所有href/class具有属性（属性值不限）的a元素；A2ahref：选择一个包含href+title属性的元素（属性值无限制）；S2具体属性值A1a[href='xxx']：选择href属性+属性值严格等于/完全匹配xxx的a元素；A2ahref='xxx'：选择同时包含href（属性值严格等于xxx）+title属性（属性值严格等于yyy）的a元素；S3部分属性值（子串值属性选择器）A1a[href~='xxx']：选择包含href属性+属性值包含xxx的a元素；A2P[lang|='en']：选择包含lang属性的a元素+属性值等于以en开头的en/p元素；2.4伪类/伪元素选择器（注）S1什么时候使用伪类：当你希望在特定状态下将某些样式应用于指定元素时；伪类可以区分一个元素的不同状态/类型类似的还有:last-child伪类；-of-type伪类/:last-of-type伪类A2:nth-child(num)P:nth-child(2n)表示选择p的父元素下的偶数元素，不管元素是P类型；)P:nth-of-type(2n)表示选取p的父元素下的偶数个元素，从元素类型为P的元素开始数1A3:nth-last-child/:nth-of-type同上，但从反方向开始计数S3其他伪类型A1:target伪类型A2:empty伪类型A3:not伪类型见MDN的:not;A4链接的推荐顺序伪类型是链接-访问-焦点-悬停-激活三个参考文档1CSSDefinitiveGuide；2个MDN简单选择器；3个MDN属性选择器；6个CSS派生选择器；
