前提声明：所有内容均为之前学习过程中的笔记和个人总结，（无法避免雷同，敬请谅解，如有侵权，私信删除）。如有错误之处请各位大佬不吝赐教。
（笔记内容将包括 HTML(5)/CSS(3)/JS/bootstrap/less/jQuery/ajax/ES6/promise/axios/Vue2/vue3/npm 以及如何搭建一个java springboot后端服务器与前端进行交互）
下篇预告：Html列表分类和字体样式设置
一、常用选择器
元素选择器：通过元素（标签名）选择器 选中页面中所有的该标签。 例如p{ }
ID选择器：通过元素的ID属性值选择标签。 格式为 #ID值。注意：标签ID属性，全网页只能出现一个，不能重复。
class选择器（类选择器）: 通过元素的class属性值选择标签。格式为.class值。
注意：可以通过类选择器选择Class相同的元素。
标签的class值，可以通过空格来设置多个不同的值。 例如：class="name1 name2" 用两个name其中一个都可以选择该元素，一般只为了给个别元素单独设置样式时使用
选择器分组：语法：选择器1，选择器2，选择器3{} 同时选择三个标签。例如：.name,#name,h1 表示同时选择 与class值 Id值 h1对应的三个元素
通配选择器：*{} 表示选择界面所有的元素。
复合（交集）选择器：选择器1选择器2选择器3：需要同时满足这三个选择器 即...又 关系 。注意：选择器之间相邻无空格。一般用在类选择器上。使用场景少，不建议使用
二、子元素和兄弟元素后代选择器
子元素：指包含关系就是父子关系 父元素直接包含子元素。
祖先元素：指直接或者间接包含的元素都是祖先元素。 被直接或间接包含元素都是后代元素。
兄弟元素：同级别并且有共同父元素的。
后代选择器：选择器1 选择器2 选择器3 {} 表示选中 元素1下级 里面元素2 再下级 里面的元素3 。
子元素选择器： 选择器1>选择2 {} 父元素里面的所有子元素 。
备注：子元素选择器和后代选择器的区别是什么？子选择器只能逐级获取元素，而后代选择器 忽略级别，会把后代中的所有复合条件的都匹配到。
三、伪类选择器
伪类：是给元素设定特殊状态的类。
语法： 例如 a:link 选择器+冒号+伪类名。
最经典案例：
a：link{} 链接未访问时的样式
a:visited{} 点击后样式
a:hover{} 鼠标放在链接上
a:active{} 点击链接瞬间样式
注意: 按照该顺序设置链接点击状态才能够生效。浏览器通过历史记录来判断链接是否被方位 visited 只能设置字体颜色。
:focus{} 一旦获取焦点后触发的伪类 一般给input设置该伪类
::selection{} 表示给P标签中内容被选中后触发的伪类. 将相当于我们复制内容是内容被选中状态下触发。
四、属性选择器
语法：选择具有某些属性的元素 选择器[属性名]{ }
选择属性值为某值得元素 选择器[属性名="属性值"]{ }
可以用通配方式选择包含属性值得元素 具体可以查看参考文档。
五、伪元素
使用伪元素来表示元素中的特殊位置
p:first-letter{} 选择所有P元素中的第一个字符
p:first-line{} 选择所有p元素中第一行的内容
p:before{} 表示p元素最前边的位置
：before{ content："这里的内容会出现在标签的最前边"} 然后里面的其他属性都是设置content中的样式。
p:after{} 表示P元素最后边的位置
：after{ content："这里的内容会出现在标签的最前边"} 然后里面的其他属性都是设置content中的样式。
六、子元素伪类：指定对应位置的元素
这里只介绍常用几种，其他的可以查看帮助文档。
：first-child 选中所有子元素中的第一个子元素
：last-child 选中所有子元素中的最后一个子元素
：nth-child(index) index值为 指定选择第几个子元素
：first-of-type 指选中属于同一个父级元素下的同类型元素的第一个元素
：last-of-type 指选中属于同一个父级元素下的同类型元素的最后一个元素
七、否定伪类 ：可以从已选中的元素中 剔除某些元素
语法 p:not(.clasname){} 描述：从选择的所有P元素中去除 指定的元素。
八、样式继承
后代可以继承祖先的样式。
利用继承可以将基本的样式设置给祖先元素，后代中的所有样式都会继承。
并不是所有样式都会被子元素继承。
比如背景相关的样式不会被继承。
每种样式都有自己的继承性，可以查看参考手册中继承性。
九、选择器和伪类的优先级（重点总结）
不同选择器对同一个元素设置样式：
内联样式1000 > ID选择器100 > 类和伪类10 > 元素1 > 通配*0 > 继承样式最低
如果选择器优先级一样，那么谁靠近元素 使用谁。
可以在样式属性的最后加上一个 ！important ，就会获得一个最高优先级。但是避免使用。
