你真的会CSS吗？[Css选择器系列一]
选择符、选择器优先级、选择器作用域
/* 后代关系 */
.box div {background: #fff;}
/* 父子关系 */
.box > div {background: #fff;}
/* 相邻兄弟关系 */
.box + div {background: #fff;}
/* 兄弟关系 */
.box ~ div {background: #fff;}以上四种是我们在编写CSS样式文件中常见的选择符，除此之外还有双管道符||和管道符|，相关知识内容个人理解不太用的到，此处不做阐述。
选择器作用域
- 选择器的作用域除基本是全局作用域的，即网页的样式呈现只关乎CSS代码的作用顺序，无关元素本身顺序。
- 除此之外，现如今CSS选择器是有局部作用域概念的，如Vue文件中的
<style scoped>
选择器优先级
| 优先级 | 权重（计算时数值表示） |
|---|---|
| 通配符、选择符、逻辑组合伪类 | 0 |
| 元素选择器 | 1 |
| 类名选择器、属性选择器、伪类 | 10 |
| ID选择器 | 100 |
| style内联样式 | - |
| !important | - |
Tips：
- 只有逻辑组合伪类
:not()- 使用权重计算，利于样式重置，同时由于
!important权重过高，且能够重置Javascript修改的样式，不建议使用，避免引起的混乱- style内联样式则用于需要临时进行修改的地方，或者当样式文件重置时比较麻烦时可修改html代码
- 关于样式重置时，同样的选择器复制粘贴到样式文件末尾不起作用时，可利用重复选择器本身来提高选择器权重，例如：
.box.box div {background: #f99;}
选择符
选择符，常用的其实不难理解，但是我们在查看一些UI框架，如 ElementUI、AntDesignVue、LayUI 等，会从中发现一些值得学习的地方，对于选择符的利用可以巧妙的解决一些需要特例化的样式。
后代选择符【空格】（ ）与子选择符【右键头】（ > ）
子选择符只会匹配当前元素的第一（个）代子元素，后代选择符则匹配所有子元素
<ul>
<li>#f99</li>
<li>#f99</li>
<ol>
<li>#333</li>
</ol>
</ul>
ul li {background:#333;} // ul内所有子级li的背景色#333
ul > li {background:#f99;} // ul内第一子级的li的背景色#f99Tips：
子选择符适用于结构固定不变的场景，对于熟悉程度来说，还是尽量使用后代选择符来解决。
相邻兄弟选择符【加号】（+）与兄弟选择符【波浪号】（~）
相邻兄弟选择符仅匹配当前元素后的第一个同级兄弟元素，兄弟选择符则匹配其后的所有同级兄弟元素
对于前端项目中或UI框架中常见的单选/复选框的变化，则使用“+”居多，且便捷。
实际代码参考：
.el-checkbox.is-bordered+.el-checkbox.is-bordered {
margin-left: 10px
}
.radio {margin-top:15px; position:relative;}
.radio input[type="radio"] {position:absolute; opacity:0;}
.radio input[type="radio"] + .radio-label {cursor: pointer;}
.radio input[type="radio"] + .radio-label:before {content: '';background: #ffffff;border-radius: 100%;border: 1px solid #bac4d0;display: inline-block;width: 14px;height: 14px;position: relative;top: 1px;margin-right: 4px;vertical-align: top;cursor: pointer;text-align: center;-webkit-transition: all 250ms ease;transition: all 250ms ease;}
.radio input[type="radio"]:checked + .radio-label:before {background-color: #4399ff!important;box-shadow: inset 0 0 0 2px #ffffff;}
.radio input[type="radio"]:focus + .radio-label:before {outline: none;border-color: #bac4d0;}
.radio input[type="radio"]:disabled + .radio-label:before {box-shadow: inset 0 0 0 2px #ffffff;border-color: #b4b4b4;background: #b4b4b4;}
.radio input[type="radio"] + .radio-label:empty:before {margin-right: 0;}Tips：
CSS样式文件的解析顺序是从上至下来进行的，因此，我们在实际项目中可以进行重置改写，同时CSS选择器是没有向前选择的选择符，这样也是避免浏览器渲染后界面又发生大幅度变化
body，html的样式改写也应当在整个CSS文件最顶部，不要夹杂在中间，会很不规范，也有可能出现闪屏的问题
元素选择器
- 元素选择器本身不能像类选择器那样重复
- 搭配属性选择器使用时元素选择器必须前置书写
Tips：
- 元素选择器不区分大小写，尽管我们在Eslint代码后可能警告是因为其不规范，所以我们的样式文件中尽量都是小写字母，包括在元素的class命名及样式的属性值时也尽量合理使用小写字母，如同一份样式文件中，颜色值应尽量统一小写#fff等
- 自定义元素<x-ele><x-ele>，现代浏览器是支持的，即Html5中的语义化标签，自定义标签可能更符合应用场景，但是由于项目需要兼容IE，一直没有实践的机会。
书中了解到，自定义元素兼容IE8，需要在<head>内添加一段Javascript代码，
<script>document.createElement('x-ele');</script>
个人理解：现在许多项目利用前端框架，Vue/React等，对于IE是不兼容到低版本的，而且创建过多的自定义 元素也需要添加许多Javascript代码，有些不太现实。
- 通配符(*)，仅在CSS reset中使用，项目内不建议使用，由于匹配到所有元素，避免产生问题。
* {margin:0; padding:0;box-sizing:border-box;}CSS知识巩固学习整理中......
参考链接 | 书籍
- 张鑫旭《CSS选择器世界》
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。