深入学习html及css笔记

一些不怎么熟悉的小特性

CSS

  • display: table;
    display: table-cell;
    

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

  • class选择器

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

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

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

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

  • ::before / ::after 伪元素

    用法类似这样:

    p::before,
    p::after {
      content: "";
      clear:both;
    }
    

    也可以用单引号来使用,IE8支持,但是用双引号也是有特别用意的:

    ​ 与伪类区分开

    伪类就是类似于::hover :link :focus

    经常在检查元素时能看到,那么具体的作用是什么?

    就是给指定元素的前面/后面插入一个额外的元素,这个元素不存在,但是能够正常显示。(伪的由来)