CSS特征之一：层叠性

解CSS特征之一：层叠性

通常在刚刚开始学习CSS时，我们都会提到CSS的继承性、层叠性、优先级，本文只对CSS的层叠性做详细的解读。

CSS层叠性的概念：

有多个选择器或一个选择器对某个或某几个标签中的多条样式进行选择，如果多个选择器都赋给某个或某几个标签相同属性，样式的作用范围发生了重叠

CSS层叠性的体现：

1：样式无冲突

/* 多个选择器选择同一个元素，样式并无冲突时 */
.box_one{
    width:100px;
    height:100px;  
}
.box_two{
    background:red;
}
?
<body>
     <div class="box_one box_two"></div>
</body>

以上代码中，样式代码并无冲突，两个选择器中的所有样式都叠加到了元素div上，div最终呈现的是一个红色的，宽高度大小为100px的容器。

2：样式有冲突
样式有冲突，同一级别不受优先级影响时

 .box_one{
   width:100px;
   height:100px;
 }
.box_two{
    width:200px;
    background:red;
}

<body>
    <div class="box_one box_two"></div>
</body>

以上代码中，在同级别时（同个元素，同是class定义选择器名称），样式代码出现冲突，两个选择器中出现同一条width属性，则以CSS代码中最后出现的那条样式为准，div最终呈现的是一个width为200px，height为100px,红色的容器。

样式有冲突，不同级别受优先级（权重）的影响时

CSS规定基本选择器的优先级从低到高排序为：元素（标记）样式 < 类别（class）样式 < ID样式 < 行内样式 < !important。

2-1：类别（class）样式 VS 元素（标记）样式

.box_one{
    width:200px;
    background:red;
} 
div{
   width:100px;
   height:100px;
 }

<body>
    <div class="box_one"></div>
</body>

以上代码中，class样式的优先级大于元素样式的优先级，即使div设置的width写在后面，最终呈现的是一个width：200px，height：100px；背景色为红色的容器。

2-2：ID样式 VS 类别（class）样式

#box{
    width:200px;
    background:yellow;
} 
.box_one{
   width:100px;
   height:100px;
   background:red;
}

<body>
    <div class="box_one" id="box"></div>
</body>

以上代码中，ID样式的优先级大于class样式的优先级，最终呈现的是一个width：200px，height：100px；背景色为黄色的容器。

2-3：行内样式 VS ID样式

#box{
    width:200px;
    background:yellow;
} 
.box_one{
   width:100px;
   height:100px;
   background:red;
}

<body>
    <div class="box_one" id="box" style="background:pink"></div>
</body>

以上代码中，CSS行内样式优先于ID的样式，div最终呈现的是一个宽度为200px，高度100px，背景颜色为粉色的容器。

2-4： !important VS 行内样式

.box_one{
   width:100px!important;
   height:100px;
   background:red!important;
}
#box{
    width:200px;
}

<body>
    <div class="box_one" id="box" style="background:pink"></div>
</body>

在CSS中，!important具有最高优先级，并且可以写在任意一条有冲突样式的后面。在以上代码中，div在行内样式表设置背景色为粉色，ID样式中width为200px；但是在class样式中，width：100px及背景色为red的后面都添加了!important，因此，最终呈现的是一个宽度为100px，高度为100px，背景色为红色的容器。

象描述

真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：

两个相邻的radio之间总是多那么一点点的间距，不是margin也不是padding，但是设计妹纸不干了！！！

我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：

.space a {
 display: inline-block;
 padding: .5em 1em;
 background-color: #cad5eb;
}
<div class="space">
 <a href="##">惆怅</a>
 <a href="##">淡定</a>
 <a href="##">热血</a>
</div>

这种表现是符合规范的应该有的表现

不过，这类间距有时会对我们布局，或是兼容性处理产生影响，需要去掉它，该怎么办呢？以下展示N种方法（欢迎补充）！

二、方法之移除空格

元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：

<div class="space">
 <a href="##">
 惆怅</a><a href="##">
 淡定</a><a href="##">
 热血</a>
</div>

或者是：

<div class="space">
 <a href="##">惆怅</a
 ><a href="##">淡定</a
 ><a href="##">热血</a>
</div>

或者是借助HTML注释：

<div class="space">
 <a href="##">惆怅</a><!--
 --><a href="##">淡定</a><!--
 --><a href="##">热血</a>
</div>

三、使用margin负值

.space a {
 display: inline-block;
 margin-right: -3px;
}

margin负值的大小与上下文的字体和文字大小相关，其中，间距对应大小值可以参见我之前“基于display:inline-block的列表布局”一文part 6的统计表格：

例如，对于12像素大小的上下文，Arial字体的margin负值为-3像素，Tahoma和Verdana就是-4像素，而Geneva为-6像素。

由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。

四、让闭合标签吃胶囊

如下处理：

<div class="space">
 <a href="##">惆怅
 <a href="##">淡定
 <a href="##">热血</a>
</div>

注意，为了向下兼容IE6/IE7等喝蒙牛长大的浏览器，最后一个列表的标签的结束（闭合）标签不能丢。

在HTML5中，我们直接：

<div class="space">
 <a href="##">惆怅
 <a href="##">淡定
 <a href="##">热血
</div>

好吧，虽然感觉上有点怪怪的，但是，这是OK的。

您可以狠狠地点击这里：无闭合标签去除inline-block元素间距demo

五、使用font-size:0

类似下面的代码：

.space {
 font-size: 0;
}
.space a {
 font-size: 12px;
}

这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器，就是Chrome, 其默认有最小字体大小限制，因为，考虑到兼容性，我们还需要添加：

类似下面的代码：

.space {
 font-size: 0;
 -webkit-text-size-adjust:none;
}

您可以狠狠地点击这里（去年制作的一个简单demo）：font-size:0清除换行符间隙demo

补充：根据小杜在评论中中的说法，目前Chrome浏览器已经取消了最小字体限制。因此，上面的-webkit-text-size-adjust:none;代码估计时日不多了。

六、使用letter-spacing

类似下面的代码：

.space {
 letter-spacing: -3px;
}
.space a {
 letter-spacing: 0;
}

根据我去年的测试，该方法可以搞定基本上所有浏览器，包括吃“东鞋”、“西毒(胶囊)”、“南地(沟油)”、“北钙(三鹿)”的IE6/IE7浏览器，不过Opera浏览器下有蛋疼的问题：最小间距1像素，然后，letter-spacing再小就还原了。

七、使用word-spacing

类似下面代码：

.space {
 word-spacing: -6px;
}
.space a {
 word-spacing: 0;
}

一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。据我测试，word-spacing的负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似，word-spacing即使负值很大，也不会发生重叠。

您可以狠狠地点击这里：word-spacing与元素间距去除demo

与上面demo一样的效果，这里就不截图展示了。如果您使用Chrome浏览器，可能看到的是间距依旧存在。确实是有该问题，原因我是不清楚，不过我知道，可以添加display: table;或display:inline-table;让Chrome浏览器也变得乖巧。

.space {
 display: inline-table;
 word-spacing: -6px;
}

八、其他成品方法

下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格栅单元见间隔方法（注意，其针对的是block水平的元素，因此对IE8-浏览器做了hack处理）：

.yui3-g {
 letter-spacing: -0.31em; /* webkit */
 *letter-spacing: normal; /* IE < 8 重置 */
 word-spacing: -0.43em; /* IE < 8 && gecko */
}
.yui3-u {
 display: inline-block;
 zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
 letter-spacing: normal;
 word-spacing: normal;
 vertical-align: top;
}

以下是一个名叫RayM的人提供的方法：

li {
 display:inline-block;
 background: orange;
 padding:10px;
 word-spacing:0;
 }
ul {
 width:100%;
 display:table; /* 调教webkit*/
 word-spacing:-1em;
}
.nav li { *display:inline;}

也就是上面一系列CSS方法的组组合合。

结语

其他去除间距的方法肯定还有，欢迎大家通过评论方式进行补充。上文部分方法可能有测试不周全之处，因此，部分细节上可能会有纰漏，欢迎指正。

最后，推荐几本书

写CSS的常用套路（下篇）...

点击观看——我写CSS的常用套路（上篇）...

box-shadow

为盒子添加阴影，增加盒子的立体感，可以多层叠加，并且会使阴影更加丝滑

本demo地址：Pagination

内发光

注意到box-shadow还有个inset，用于盒子内部发光

利用这个特性我们可以在盒子内部的某个范围内设定颜色，做出一个新月形

再加点动画和滤镜效果，“猩红之月”闪亮登场！

注意到它散发着淡淡的红光，其实就是2个伪元素应用了模糊滤镜所产生的效果

本demo地址：Crimson Crescent Loading

text-shadow

文本阴影，本质上和box-shadow相同，只不过是相对于文本而言，常用于文本发光，也可通过多层叠加来制作霓虹文本和伪3D文本等效果

发光文本

本demo地址：Staggered GlowIn Text

霓虹文本

本demo地址：Neon Text

伪3D文本

本demo地址：Staggered Bouncing 3D Loading

background-clip:text

能将背景裁剪成文字的前景色，常用来和color: transparent配合生成渐变文本

本demo地址：Menu Hover Fill Text

gradient

渐变可以作为背景图片的一种，具有很强的色彩效果，甚至可以用来模拟光

linear-gradient

线性渐变是笔者最常用的渐变

这个作品用到了HTML的dialog标签，线性渐变背景，动画以及overflow障眼法，细心的你看出来了吗:)

本demo地址：Confirm Modal

radial-gradient

径向渐变常用于生成圆形背景，上面例子中Snow的背景就是一个椭圆形的径向渐变

此外，由于背景可以叠加，我们可以叠加多个不同位置大小的径向渐变来生成圆点群，再加上动画就产生了一种微粒效果，无需多余的div元素

本demo地址：Particle Button

conic-gradient

圆锥渐变可以用于制作饼图

用一个伪元素叠在饼图上面，并将content设为某个值（这个值通过CSS变量计算出来），就能制作出度量计的效果，障眼法又一次完成了它的使命

本demo地址：Gauge (No SVG)

filter

PS里的滤镜，blur最常用

融合效果

当blur滤镜和contrast滤镜一起使用时，会产生一种融合（gooey）的奇特效果

本demo地址：Snow Scratch

backdrop-filter

对背景应用滤镜，产生毛玻璃的效果

本demo地址：Frosted Glass

mix-blend-mode

PS里的混合模式，常用于文本在背景下的特殊效果

以下利用滤色模式（screen）实现文本视频蒙版效果

本demo地址：Video Mask Text

clip-path

PS里的裁切，可以制作各种不规则形状。如果和动画结合也会相当有意思

本demo地址：Name Card Hover Expand

故障效果

由于clip-path有裁切功能，因此可以将多个文字叠在一起，并按比例裁切成多分，再应用交错动画，就能制作出酷炫的故障效果（glitch）。

本demo地址：Cross Bar Glitch Text

mask

PS里的遮罩。所谓遮罩，就是原始图片只显示遮罩图片非透明的部分

镂空效果

虽然clip-path能裁切出形状，但它无法镂空，因为形状的里面它管不着

可能有人（包括我）会用伪元素来“模拟”镂空（通过设置同样的背景色），但这样并非真的镂空，换了个背景或浮在图片上就会暴露出来，这时我们就要求助于遮罩了

假设，你想制作一个空心的圆环，那么你只需将一个径向渐变作为元素的遮罩，并且第一个color-stop设置为透明，其他的color-stop设置为其他颜色即可，因为遮罩的定义就是只显示遮罩图片非透明的部分

注意：为了消除锯齿，这个径向渐变的中间需要有一个额外的color-stop用于缓冲，长度设置为原长度加0.5px即可

本demo地址：Circle Arrow Nav

-webkit-box-reflect

投影效果，不怎么常用，适合立体感强的作品

本demo地址：Card Flip Reflection

web animations

虽然这并不是一个CSS特性，但是它经常用于完成那些CSS所做不到的事情

那么何时用它呢？当CSS动画中有属性无法从CSS中获取时，自然就会使用到它了

跟踪鼠标的位置

目前CSS还尚未有获取鼠标位置的API，因此考虑用JS来进行

通过查阅相关的DOM API，发现在监听鼠标事件的API中，可通过e.clientX和e.clientY来获得鼠标当前的位置

既然能够获取鼠标的位置，那么跟踪鼠标的位置也就不是什么难事了：通过监听mouseenter和mouseleave事件，来获取鼠标出入一个元素时的位置，并用此坐标来当作鼠标的位移距离，监听mousemove事件，来获取鼠标在元素上移动时的位置，同样地用此坐标来当作鼠标的位移距离，这样一个跟踪鼠标的效果就实现了

本demo地址：Menu Hover Image

CSS Houdini

CSS Houdini是CSS的底层API，它使我们能够通过这套接口来扩展CSS的功能

让渐变动起来

目前来说，我们无法直接给渐变添加动画，因为浏览器不理解要改变的值是什么类型

这时，我们就可以利用CSS.registerProperty()来注册我们的自定义变量，并声明其语法类型（syntax）为颜色类型<color>，这样浏览器就能理解并对颜色应用插值方法来进行动画

还记得上文提到的圆锥渐变conic-gradient()吗？既然它可以用来制作饼图，那么我们能不能让饼图动起来呢？答案是肯定的，定义三个变量：--color1、--color2和--pos，其中--pos的语法类型为长度百分比<length-percentage>，将其从0变为100%，饼图就会顺时针旋转出现

利用绝对定位和层叠上下文，我们可以叠加多个从小到大的饼图，再给它们设置不同的颜色，应用交错动画，就有了下面这个炫丽的效果

本demo地址：Mawaru

彩蛋

将交错动画和伪类伪元素结合起来写出来的慎重勇者风格的菜单

本demo地址：Shinchou Menu

在线咨询

上一篇：JavaScript Frame对象
下一篇：Allavsoft for Mac(Mac视频下载器

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS特征之一：层叠性

解CSS特征之一：层叠性

CSS层叠性的概念：

CSS层叠性的体现：

2：样式有冲突样式有冲突，同一级别不受优先级影响时

2-1：类别（class）样式 VS 元素（标记）样式

2-2：ID样式 VS 类别（class）样式

2-3：行内样式 VS ID样式

2-4： !important VS 行内样式

二、方法之移除空格

三、使用margin负值

四、让闭合标签吃胶囊

五、使用font-size:0

六、使用letter-spacing

七、使用word-spacing

八、其他成品方法

box-shadow

内发光

text-shadow

发光文本

霓虹文本

伪3D文本

background-clip:text

gradient

linear-gradient

radial-gradient

conic-gradient

filter

融合效果

backdrop-filter

mix-blend-mode

clip-path

故障效果

mask

镂空效果

-webkit-box-reflect

web animations

跟踪鼠标的位置

CSS Houdini

让渐变动起来

彩蛋

您的项目需求

2：样式有冲突
样式有冲突，同一级别不受优先级影响时