选择器

:first-line :first-letter 选择第一行，第一个字

not选择器 body.not(h1)

first-child, last-child 选择一个父元素中第一，最后一个子元素

nth-child(n)表示选择第n个元素

nth-of-type，只计算同类元素

only-child 只有一个元素时选择

:hover 鼠标经过 :focus 鼠标点击

在标题前添加嵌套连续编号

<style type="text/css">
    h1:before{
        content: counter(counter) '. ';
    }
    h1{
        counter-increment: counter;
        counter-reset: subcounter;  #重置subcounter
    }

    h2:before {
        content: counter(counter) '-' counter(subcounter) '.';  #1-2. 形式
    }
    h2 {
        counter-increment: subcounter;
        padding-left: 20px;
    }

    h3:before{
        content: counter(counter) '-' counter(subcounter) '-' counter(subsubcounter) '.'
    }
    h3{
        counter-increment: subsubcounter;
        padding-left: 40px;
    }
</style>

盒相关样式

block类型：例如div、p标签，占满一整行，可以设置长宽

inline类型：例如span标签，只占内容的宽度，一行可存在多个，不能设置长宽

inline-block类型：添加 display: inline-block，可设置长宽，也可允许一行存在多个。默认是底部对齐，vertical-align: top可设置为顶部对齐。可用于显示水平菜单。

overflow属性： overflow:hidden隐藏超出部分， overflow-scroll超出部分滚动显示，overflow:auto根据需要出现水平滚动或垂直滚动

box-sizing:border-box:添加属性后盒子不会被padding和盒子厚度撑开。

布局

多栏布局

div{
    width: 500px;
    
    column-count: 2;  #将内容分两栏
    -moz-column-count:2;   #firefox浏览器
    -webkit-column-count:2;   #谷歌浏览器

    column-rule: 1px solid red;   #中间线
    -moz-column-rule: 1px solid red
    -webkit-column-rule: 1px solid red;

    -webkit-column-gap: 3em;   #两栏间隔距离
}

盒布局

分三栏居中显示

<style type="text/css">
    #container{
        display: -webkit-box;
        display: -moz-box;
        margin: 0 auto;  #居中
        padding: 0;
        width: 1000px;
    }
    .left{
        padding: 20px;
        width: 25%;
    }
    .center{
        padding: 20px;
        width: 30%;
    }
    .right{
        padding: 20px;
        width: 25%
    }
</style>

弹性布局

中间部分自动补满

<style type="text/css">
    #container{
        display: flex;
        margin: 0 auto;
        padding: 0;
        width: 1000px;
    }
    .left{
        order:1;
        padding: 20px;
        width: 15%;
    }
    .center{
        order:2;   #显示顺序
        padding: 20px;
        flex: 1;
    }
    .right{
        padding: 20px;
        width: 15%
    }
</style>