基础选择器
一、元素选择器
二、类选择器
1、一个元素的class属性值可同时包含多个样式类名（越靠前样式越基础样式，越靠后样式越个性样式例如：btn是基础样式类，active是个性样式类class="btn active"）
2、a.active{}是a标签，而且class是active
三、id选择器
1、用于为某一个特定元素定义专属样式
2、假如非要给一个网页俩元素起同样的id名，会出错吗？——浏览器会自动忽略第2个样式——尝试
3、什么时候用？这个元素在网页中具有唯一的特性
四、群组选择器
1、是将多个选择器并列放在一起匹配样式，“,”
五、后代选择器
1、所有后代都算，“空 格”
六、子代选择器
1、直接子元素，直接后代，“>”
2、关注“继承性”，有继承性属性不能用来做子代/后代选择器实验
七、伪类选择器
1、用得最多是“链接伪类”，“:”
2、链接伪类使用顺序速记：love&hate
3、已经点过的链接变为紫色了，怎么让它颜色恢复？——浏览器「清除浏览数据」
4、伪类选择器高级部分： - :first-child - :last-child - :nth-child(n) - :empty - :only-child
八、动态伪类
1、:hover{}：鼠标悬停时变为新样式
九、基础选择器优先级
1、id选择器>类选择器>元素选择器
2、权重：元素1，类10，伪类10，id100，内联1000
3、!important
高级选择器
一、兄弟选择器
1、定义：具备相同父元素的平级元素
2、相邻兄弟选择器：专门用于获取紧邻当前元素的之后的一个兄弟元素；语法：选择器1+选择器2{};
//母以子贵，只造福一个人
li:hover+li{} //鼠标悬停在当前li时，后面相邻的平级li执行效果
3、通用兄弟选择器：专门用于获取当前元素后面所有满足条件的兄弟元素；语法：选择器1～选择器2{};
//一人升官，鸡犬升天，造福很多人
li:hover~li{} //鼠标悬停在当前li时，后面所有符合条件的平级li执行效果
二、属性选择器
1、当多个选择器连用时，中间没有任何分割————表示“而且”
2、常用几种属性选择器
// [属性=值]：专门匹配附带指定属性，且属性值为指定“值”的元素
[title=test]，可匹配附带title属性，且属性值为test的元素
// [属性*=内容]：专门匹配附带指定属性，且属性值中包含指定“内容”的元素
[href*=aa]，可匹配附带href属性，且属性值包含aa的元素
// [属性^=开头]：专门匹配附带指定属性，且属性值为指定“值”开头的元素
[href^=https]，可匹配附带href属性，且属性值以https开头的元素
// [属性$=结尾]：专门匹配附带指定属性，且属性值为指定“值”结尾的元素
[href^=com]，可匹配附带href属性，且属性值以com结尾的元素
三、结构伪类
1、专门通过子元素在其父元素下的位置来匹配某一个子元素
2、常用包括
— ：first-child
- ：last-child
- ：nth-child(n)
- ：empty
- ：only-child
- ：not(selector){}
3、具体理解
// body：first-child————会查找出body中的所有“长子”；易记：社会中有很多长子，是长子就查找出来；
// body：last-child————会查找出body中的所有“老幺”；易记：社会中有很多老幺，是老幺就查找出来；
// body：nth-child(2)————会查找出body中的所有“老二”；易记：社会中有很多老二，是老二就查找出来；
// body：empty————专门匹配没有子元素的元素；
// body：only-child————专门匹配作为其父元素下唯一子元素的元素；易记：社会上有很多独生子女，是独生子女就查找出来；
// body：not(selector){}————对此选择器对应元素之外的元素进行样式设置；
四、伪元素选择器
1、常用包括
- :first-letter或 ::first-letter、- :first-line或 ::first-line（双冒号标准）
- ::selection
- ::before{content:">>"}、::after{content:"......"}（content还可以动态加图片）————————“内容生成”最好的方式解决margin溢出
2、清除浮动给父元素带来的高度坍塌影响（高频面试题）
1、理解“高度坍塌”：父元素的高度都是由内部未浮动的子元素的高度撑起的；如果给子元素设置浮动，子元素浮动起来，就会脱离普通文档流的位置，不占用普通文档流位置后，父元素的高度就会失去支撑，称之为“高度坍塌”。（如下图）
2、解决办法：
（1）给父元素直接设置固定的高度（height）属性————弊端：重口难调
（2）给父元素设置overflow属性，取值为hidden或aotu。CSS中的overflow属性会强制要求父元素容器扩大到包含所有内部浮动的子元素。————弊端：如果父元素刚好有内容需要显示而不是隐藏，就会发生需求与实现上的冲突。
（3）设置父元素也浮动。这样父元素就和子元素在同一水平层次定位了，父元素也就自动扩大到包含所有浮动的内部子元素。————弊端：会使父元素后方的元素上去了（例如：footer页脚区），可使用clear：both来清除浮动，即对父元素之后的平级元素清除浮动。
（4）最优方案：使用“内容”生成。
#父元素::after{content:"",display:table,clear:both}
