Geek Improve

《CSS选择器世界》笔记 [一]

Tips

基于张鑫旭open in new window老师《CSS选择器世界》一书的阅读，归纳整理笔记，用以构建系统性相关知识

选择器优先级、选择器作用域、选择符

CSS的世界里，选择器也是重要的组成部分，系统性学习选择器相关的内容，对于CSS的编写能做到更好

选择器优先级

优先级权重（计算时数值表示）
通配符、选择符、逻辑组合伪类0
元素选择器1
类名选择器、属性选择器、伪类10
ID选择器100
style内联样式-
!important-

注意

逻辑组合伪类只有 :not()

使用权重计算，利于样式重置，同时由于!important 权重过高，且能够重置Javascript修改的样式，不建议使用，避免引起的混乱

style内联样式则用于需要临时进行修改的地方，或者当样式文件重置时比较麻烦时可修改html代码

关于样式重置时，同样的选择器复制粘贴到样式文件末尾不起作用时，可利用重复选择器本身来提高选择器权重，例如：.box.box div {background: #f99;}

选择器作用域

  • 选择器的作用域除基本是全局作用域的，即网页的样式呈现只关乎CSS代码的作用顺序，无关元素本身顺序。
  • 除此之外，现如今CSS选择器是有局部作用域概念的，如Vue文件中的 <style scoped>

选择符

/* 后代关系 */
.box div {background: #fff;}
/* 父子关系 */
.box > div {background: #fff;}
/* 相邻兄弟关系 */
.box + div {background: #fff;}
/* 兄弟关系 */
.box ~ div {background: #fff;}

以上四种是我们在编写CSS样式文件中常见的选择符，除此之外还有双管道符 || 和管道符 | ，相关知识内容个人理解不太用的到，此处不做阐述。

选择符，常用的其实不难理解，但是我们在查看一些UI框架，如 ElementUIopen in new window、AntDesignVueopen in new window、LayUIopen in new window 等，会从中发现一些值得学习的地方，对于选择符的利用可以巧妙的解决一些需要特例化的样式。

后代选择符【空格】（ ）与子选择符【右键头】（ > ）

子选择符只会匹配当前元素的第一（个）代子元素，后代选择符则匹配所有子元素

<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的背景色#f99

子选择符适用于结构固定不变的场景，对于熟悉程度来说，还是尽量使用后代选择符来解决。

相邻兄弟选择符【加号】（+）与兄弟选择符【波浪号】（~）

相邻兄弟选择符仅匹配当前元素后的第一个同级兄弟元素，兄弟选择符则匹配其后的所有同级兄弟元素 对于前端项目中或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;}

注意

CSS样式文件的解析顺序是从上至下来进行的，因此，我们在实际项目中可以进行重置改写，同时CSS选择器是没有向前选择的选择符，这样也是避免浏览器渲染后界面又发生大幅度变化
body，html的样式改写也应当在整个CSS文件最顶部，不要夹杂在中间，会很不规范，也有可能出现闪屏的问题

最近更新时间: