记录一些不怎么熟悉的小特性

CSS

table布局

1
2
display: table;
display: table-cell;

对于新时代来说,旧的table布局模式已经落伍,都采用了DIV(盒子)模型来构成页面的结构。但有时仍会用到table的一些特性,那么可以在CSS中,对盒子加入这个代码来实现。

class选择器

1
div[class^='col-'] {}

非常有意思,这个选择器规则类似正则:选择以col-开头的所有div。

1
div[class$='col-'] {} # 相同的也有以col-结尾的

详细链接:https://www.impressivewebs.com/css3-attribute-selectors-substring-matching/

::before / ::after 伪元素

用法类似这样:

1
2
3
4
5
p::before,
p::after {
content: "";
clear:both;
}

也可以用单引号来使用,IE8支持,但是用双引号也是有特别用意的:与伪类区分开
伪类就是类似于::hover :link :focus

经常在检查元素时能看到,那么具体的作用是什么?
就是给指定元素的前面/后面插入一个额外的元素,这个元素不存在,但是能够正常显示。(伪的由来)