一些CSS新增的知识

1、CSS引用文件字体

准备工作：将字体文件解压放于fonts文件夹中，字体文件通常有eot、svg、ttf、woff四种格式

CSS声明字体引用：

@font-face {
    font-family: test;
    src: url('../fonts/test.eot') format('embedded-opentype'),
    url('../fonts/test.svg') format('svg'),
    url('../fonts/test.ttf') format('truetype'),
    url('../fonts/test.woff') format('woff');
}

CSS设置字体为文件字体：

.example{
    font-family: test;
    font-style: normal;
}

假如使用的是字体图标，字体图标会有自己的编码，如果把字体图标放在伪元素中，则代码如下：

.example::before{
    content: '\e958'; //字体图标编码作为伪元素的内容
    font-size: 13px;
}

2、CSS选择器巧用

2.1、使用兄弟选择器

假如ul中并排的n个块级元素li，要设置相邻元素的间隔线，可使用以下代码：

//相邻兄弟选择器选择紧接在另一个元素后的元素，而且二者有相同的父元素，会循环查找
ul>li+li{
    border-left:1px solid #ccc;
}
//通用兄弟选择器选择指定元素的后面的所有兄弟结点，该情景下相邻兄弟选择器性能较好

ul>li~li{ border-left:1px solid #ccc; }

2.1、使用属性选择器

假如要匹配使用了test-开头的类，如class="test-1"、class=" test-2"、class="start  test-3"...使用以下代码以匹配多种情况

[class^="test-"],[class*=" test-"]{
     ···      
}