前端面试大全（CSS3）

Posted 2021-04-09 学掌门

·        CSS3新增伪类有那些？

CSS3新增伪类

p:last-of-type        选择其父元素的最后的一个P元素

p:last-child           选择其父元素的最后子元素(一定是P才行)

p:first-of-type       选择其父元素的首个P元素

p:first-child          选择其父元素的首个p元素(一定是p才行)

p:only-child　　　　选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素)

p:only-of-type　　　选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有)　

选第N个

p:nth-child(n)   　　选择其父元素的第N个 刚好是p的元素

p:nth-last-child(n)   ..............................................从最后一个子元素开始计数

p:nth-of-type(n)　  选择其父元素的n个元素

p:nth-last-of-type(n)  ........................从最后一个子元素开始计数

用在input上

:enabled

:

·        请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

• 主要作用是让元素body使用flexbox布局，而不是普通的块布局。在文档流中的所有子元素（即不是绝对定位的元素）现在都变成了伸缩项目。

::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素     名称组成）  双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的     已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，     而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

       想让插入的内容出现在其它内容前，使用::before，否者，使用::after；在代码顺序上，::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上