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

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

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