你真的懂CSS吗？【css选择器系列一】选择器、选择器优先级、选择器范围/*后代关系*/.boxdiv{background:#fff;}/*父子关系*/.box>div{background:#fff;}/*相邻兄弟关系*/.box+div{background:#fff;}/*兄弟关系*/.box~div{background:#fff;}以上四种在写CSS样式文件时很常见除了选择器，还有是双管道符号||和管道符号|，相关知识内容对个人理解用处不大，这里就不细说了。选择器作用域选择器的作用域基本上是全局作用域，即网页的样式渲染只与CSS代码的顺序有关，与元素本身的顺序无关。另外，现在的CSS选择器都有局部作用域的概念，比如Vue文件中的
ulli{background:#333;}//全在ul子级li的背景色#333ul>li{background:#f99;}//ul中第一个子级li的背景色#f99提示：子选择器适用于有的场景一个固定的结构，为了熟悉，或者尝试使用后代选择器来解决。相邻兄弟选择器[加号](+)和兄弟选择器[波浪号](~)相邻兄弟选择器只匹配当前元素之后同级的第一个兄弟元素，兄弟选择器匹配后面的所有兄弟元素同层多用“+”来表示前端项目或UI框架中常见的radio/checkbox的变化，比较方便。国际代码参考：.el-checkbox.is-bordered+.el-checkbox.is-bordered{margin-left:10px}.radio{margin-top:15px;position:relative;}.radioinput[type="radio"]{position:absolute;opacity:0;}.radioinput[type="radio"]+.radio-label{cursor:pointer;}.radioinput[type="radio"]+.radio-label:before{content:'';background：#ffffff；边框半径：100%；边框：1pxsolid#bac4d0；显示：内联块；宽度：14px；高度：14px；位置：相对；顶部：1px；边距：4px；垂直对齐：top;cursor:pointer;text-align:center;-webkit-transition:all250msease;transition:all250msease;}.radioinput[type="radio"]:checked+.radio-label:before{背景-颜色：#4399ff!important;box-shadow:inset0002px#ffffff;}.radioinput[type="radio"]:focus+.radio-label:before{outline:none;border-color:#bac4d0;}.radioinput[type="radio"]:disabled+.radio-label:before{box-shadow:inset0002px#ffffff;border-color:#b4b4b4;background:#b4b4b4;}.radioinput[类型="radio"]+.radio-label:empty:before{margin-right:0;}Tips:CSS样式文件的解析顺序是从上到下，所以我们在实际项目中可以重新设置重写，同时time，css选择器是没有前向选择的选择器，这样也避免了浏览器渲染body后界面发生明显变化，而且html的样式重写也应该放在整个css文件的最前面，而不是混在中间，这将是非常不舒服的规格，也可能出现闪屏问题。元素选择器元素选择器本身不能像类选择器那样重复。与属性选择器一起使用时，元素选择器必须写在前面。Tips:元素选择器是不区分大小写的，虽然我们在Eslint代码后可能的警告是因为它不规范，所以我们尽量在我们的样式文件中使用小写字母，包括在元素的类名和样式的属性值。我们也尽量合理使用小写字母，就像样式文件中一样，颜色值小写#fff等自定义元素尽量统一
