一些CSS3特性

文本多列展示。

column-width:12em;设定列宽。改变视口宽度会动态改变列数。假如想让列数固定，宽度可变。可以写成column-count:4;column-gap:2em;设置劣间间距。column-rule:thin dotted #999;设置列之间的分割线样式。多列布局中，如果每一列文本太长可能影响用户体验。这是因为用户需要反复上下滚动页面，会很麻烦。

断字

假如将很长的URL放到很小的空间里，URL会跑出空间范围。使用一个CSS3声明可以修复它。word-wrap:break-word;

截断文本

截断文本以前一直是服务器端来做。CSS可以通过样式来实现：width:520px;overflow:hidden;text-overflow:ellipsis;white-space:no-wrap;white-space:nowrap声明是为了确保长出来的文本不会折行显示在外部元素中。

创建水平滚动面板

设置父模块overflow-x:auto;white-space:nowrap;设置子模块display:inline-block。inline-flex或inline-table都可以。

::before和::after伪元素，如果查询示例代码，你会发现::before伪元素用于显示项目的数量。如果使用伪元素，为了保证::before和::after显示，它们必须包含一个content值，就算空白也行。显示之后，这些元素就好像相应元素的第一个和最后一个子元素一样。

为了增添点艺术情调，还可以尽量隐藏滚动条。可惜相应属性只有个别浏览器支持。所以要手工添加前缀（Autoprefixer不会添加这些属性，因为它们是专有的）。此外还可以针对Webkit浏览器（ios设备）添加一些触摸样式的滚动效果。只是firefox不支持隐藏滚动条，安卓低版本还不支持水平滚动。

特性查询

CSS原生的分支语法就是特性查询。不过IE11以及IOS8.1之前不支持这个特性。特性查询与媒体查询语法类似：

@supports(flashing-sausages:lincolnshire){
  body{
     sausage-sound:sizzing;  
    }  
}

这样写得前提是浏览器支持@supports,可如果不支持，这两块代码都不会被应用。如果涵盖不值@supports的设备，最好首先写默认的声明，然后再写@supports声明。

也可以组合条件，&&符号改成and关键字。支持的关键字还有or。

有些不支持@supports的浏览器，可以使用一个js工具解决这个问题。

Modernizr

在@supports得到广泛支持以前，可以使用Modernizr这个Js工具。目前，它是CSS中实现分支的最可靠方式。

新CSS3选择符

 data-*属性是HTML5引入的一个用于保存数据的属性。CSS3最后hi吃一句属性选择符包含的子字符串来选择元素。根据子字符串匹配元素分配三种情况：以....开头、包含....、以....结尾。

“以...开头”选择符来选择：img[alt^="file"]{}

“包含....”选择符来选择：img[alt*="file"]{}

“以....结尾”选择符来选择：img[alt$="file"]{}

CSS3结构化伪类

以前最后一个或者第一个都要单独写一个类。这种方式在一些管理系统内添加起来不容易。利用CSS3提供得结构化伪类，可以轻松处理类似问题。

CSS2.1就有一个用于匹配列表中第一项的选择符：div:first-child{},css3又增加了一个可以选择最后一项的选择符：div:last-child{}。

使用nth-child选择符可以解决更麻烦的问题。还是与前面一样得标记，如果想隔一个选一个怎么办？可以选择奇数个：nav-Link:nth-child(odd){},.nav-Link:nth-child(even){}。

使用nth

CSS3提供了以下几个基于nth的规则：nth-child(n),nth-last-child(n),nth-of-type(n),nth-last-of-type(n)。传入整数。比如nth-child(2)会选择第二项。传入数值表达式。例如nth-last-child(2)会从第一项开始，然后每三个选一个。

:not,另一个有用的伪类选择符是表示“取反”的:not。这个选择符用于选择“非.....”。

:empty,这个伪类选择器用来解决“只添加了一些内边距，而内容会在将来某个时刻动态插入的元素。这个元素有时候有内容，有时候没有。问题在于，在这个元素没有内容时，它得内边距还在。”这个时候我们可以用伪类:empty来隐藏它。.thing:empty{display:none;}内容中有空格算是由内容，只有注释不算有内容。

伪类从CSS2开始引入，CSS3又对其语法进行了修订。CSS3要求写成双:。

:first-line伪元素选择的目标根据视口大小不同而不同，这是最关键的。p::first-line{color:#ff0cff};随着视口大小变化，呈现粉红色得文本长度也会变化。

CSS自定义属性和变量

CSS现在也出现了可编程的特性。首先就是自定义蜀绣那个。虽然经常被称为变量，但作为变量并非自定义属性的唯一用途。浏览器实现的支持并不多。自定义属性可以存储信息，这些信息可以在样式表的其他地方使用，也可以通过JS操作。

:root{
  --MainFont: 'PingFangSC-Regular'  
}
.Title{
  font-family:var(--MainFont);  
}

自定义属性以两个短划线开头，接着是自定义属性的名字。

 

转载于:https://www.cnblogs.com/wlxll/p/8400586.html