由于css特性太多，所以与其企图知道所有的css特性，不如让自己知道可以用什么css实现什么更好。
一、多列布局columns
css多列布局规范描述了如何通过多列显示文本(即，如果不用这个属性的话，文本一般都是一大块，而用了这个可以给将文本设置为小块小块的)。下面是常用的5个属性：
column-width：<length> | auto 设置或检索对象每列的宽度
.column-count：<integer> | auto 设置或检索对象的列数
.column-gap：<length> | normal 设置或检索对象的列与列之间的间隙
column-rule：[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]设置每一栏之间的边框，即两个栏中间的那个线。复合属性。相当于border属性
column-span：none | all 设置或检索对象元素是否横跨所有列。
columns 规定设置 column-width 和 column-count 的简写属性。
二、在css中创建分支
这里要用到一个@supports，即特性检测，但是这个的浏览器支持还不怎么多
- @supports: 它充许我们可以根据浏览器对CSS特性的支持情况来定义不同的样式.
/* 表示在浏览器支持display：flex的情况下才用下面样式 */
@supports (display: flex) {
div { display: flex; }
}
/* 并且还可以判断多个情况，用and和or。and表示，如果几个都支持则用下面代码，or表示只要支持其中一个就可以用下面代码 */
@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) {
// ...
}
三、新css3选择符
1、属性选择器
新的css3属性选择符把属性的值当作一个字符串来选择，如下：
/* 以什么开头 */
img[alt^="file"] 选择以file这个字符串开头的alt元素
/* 包含... */
img[alt*="value"] /* 选择包含value这个值的alt元素 */
/* 以什么结尾 */
img[alt$="value"] /* 选择以value结尾的alt元素 */
2、另一些选择器选择器
- (1)>子元素选择器：选择元素的直接的目标子元素，不是选择所有的子元素
main>div {background: red;}
<main>
<p class='i'>1</p>
<div>2</div> // red
<div>3</div> // red
</main>
- (2)+选择器：相邻兄弟选择器。选择有相同父元素的，后面紧接着的那个兄弟元素(选择后面的那一个)。
.i + div {background: red;}
<main>
<p class='i'>1</p>
<div>2</div> // red
<div>3</div>
</main>
- (3)~同级兄弟选择器：选择指定元素后面所有的同级兄弟目标元素
// 比如，hover第二个p，则3、4个p颜色变黄
.father p:hover~p {
background: yellow;
}
<div class="father">
<p>1</p>
<div id="a1">fudong1111111111111111111111</div>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
3、伪类选择器
- :first-child和:last-child : 匹配属于其父元素的第一个或者最后一个子元素。这个伪类实际上为一个筛选作用，筛选的范围为调用这个伪类的选择器。如下：
- :nth-child(n): 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。odd为奇数，even为偶数。如下：- :nth-last-child(n): 这个和nth-child差不多，不过是从dom的另外一头开始的。
- :nth-of-type(): 匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。要区分类型。n从1开始- :nth-last-of-type: 从dom的另一头开始的。
- :not(selector): 表示选择除了里面元素之外的其他元素
- :empty: 匹配没有子元素（包括文本节点）的每个元素。
- :first-line: 用于选取指定选择器的首行
<body>
<h1>这是标题</h1>
<p class="what">第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
</body>
.what:first-child { /* 不会匹配元素。因为，首先选择的为.what元素，即，是在.what这个范围内在进行筛选出：first元素 */
background:#ff0000;
}
p:last-child { /* 选择第4个段落 */
background:#ff0000;
}
p:nth-child(2) /* 选择第一个段落 */
{
background:#ff0000;
}
p:nth-child(odd) /* 选择第二个段落，第4个段落 */
{
background:#ff0000;
}
p:nth-child(2n+1) /* n依次取0，1，2....。选择第二个段落，第4个段落 */
{
background:#ff0000;
}
p:nth-of-type(1) /* 选择第一个段落 */
{
background:#ff0000;
}
p:not(.what) { /* 选择二、三、四个段落 */
background:#ff0000;
}
四、css自定义属性和变量
自定义属性可以存储信息，然后这些信息可以在样式表的其他地方使用。自定义属性以两个短划线开头，接着是自定义属性的名字。
:root { /* 这里用root伪类把自定义属性保存在根元素上 */
--MainFont: Arial, sans-serif;
}
.Title { /* 这里用var()调用自定义属性 */
font-family: var(--MainFont);
}