“海边拾贝”系列文章旨在对细碎的知识点进行整理和补遗，包括但不限于八股，因此，该系列文章建议有一定基础的前端人士用以巩固知识，不建议前端初学者食用

相应系列文章导航：
海边拾贝（零）开篇
海边拾贝（一） - HTML篇
海边拾贝（二） - CSS篇 <-你在这里

CSS选择器及其优先级

点击查看详情

id选择器：#id
类选择器：.class
属性选择器：input[type='radio']
标签选择器：div
伪类选择器：li:hover
伪元素选择器：li:before
相邻元素选择器：li + div
子代选择器：li>div
后代选择器：li div
兄弟选择器：li ~ div
not选择器：li:not()
has选择器：li:has()

优先级排序：!important(10000) > 行内样式(1000) > id(100) > 类/伪类/属性(10) > 标签/伪元素(1) > 其他(0)

注意事项:
选择器按照优先级排序，!important默认最高优先级
相同优先级取最后出现的样式
同为兄弟选择器，+只能选择上下元素，~能选择上一个往下的所有元素

隐藏元素的方法与区别

点击查看详情

display:none：在DOM数中直接将其移除
visible:hidden：DOM中仍然保留，仍然占据空间，但无法响应事件
opacity:0：元素透明度设为0，仍可以响应事件
z-index:-1：将显示优先级丢到别的元素后边
transform：scale(0)：将元素缩放为0
position:absolute：将元素丢到视口外

伪类和伪元素的区别

点击查看详情

伪类：在已有元素上添加特定的处理事件，不会产生新元素
伪元素：在目标元素前后插入新的元素，因其只在样式中显现，所以叫做伪元素

常见的伪类和伪元素：
伪类：a:hover、input:focus、input:checked、li:nth-child()、li:nth-of-type()
伪元素：a::before、a::after、p::first-letter、input::placeholder
反直觉的注意事项：:nth-child() 和 nth-of-type()是相对于父元素的选择，如果要选择子元素，对伪类用子代选择器

CSS3中的一些新特性

点击查看详情

新增多种选择器：例如属性选择器、not选择器、has选择器等
圆角：border-radius
动画和过渡：animation和transition
阴影和反射：box-shadow、text-shadow、filter:drop-shadow()
新的布局方式：flex和gird布局
媒体查询：@media
滤镜：filter:blur()等
混合模式：mix-blend-mode
伪类和伪元素
渐变和遮罩：gradient、mask

对于requestAnimationframes的理解

点击查看详情

requestAnimationFrame 是一种用于实现高性能动画的 Web API，它能够根据屏幕刷新率来优化动画的渲染，传入一个回调函数，基于浏览器渲染频率，1秒60帧进行页面重绘刷新

对CSS预处理器和后处理器的认识

点击查看详情

CSS预处理器：如Sass、Less、Stylus是用来预编译css代码的，可以通过函数，循环以及混入等方法预编译css代码，从而像其他编程语言一样编译css
后处理器：如postCss，用来给已经编译完的css代码进行规范化处理，如添加浏览器前缀，从而实现兼容性问题

为什么要清除浮动？如何清除浮动？

点击查看详情

浮动是一种常见的布局方式，用以将一系列元素统一排列或对其，但是，容器不设高度且子元素浮动时，容器高度不能被子元素撑开。此时子元素就会被撑到容器外面，造成“高度塌陷”

本质原因可以理解为浮动和absolute定位具有一定的共性，都同属于BFC，会脱离原本的文档流
清除浮动的方式：
使用clear属性：clear:both清除浮动
使用overflow:hidden：将超出部分隐藏
使用伪元素：例如::after来设置清除浮动的块，必须为块级元素，并且必须设置clear:both

CSS对超出文字应用省略号

点击查看详情

对普通容器，如果要设置超出容器时的状态，只需要设置overflow属性即可，但这种方式，仅仅适用于父容器，并且选择的方式有限，对于文字，可以使用下列属性：

height：设置容器高度，超出部分将进行截断
white-space:nowrap：强制在一行内显示
text-overflow:ellipsis：设置超出的文字显示省略号
通过以上方式即可在文字容器上实现文字的省略号显示