Question

我已经购买了一个HTML / CSS模板。当我浏览CSS文件时，我看到这段代码让我很困惑。

.team-member .details, .team-member .details {
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.team-member .details {
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateY(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
}
.team-member .details {
    -webkit-transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateY(180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
}
.team-member .details {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -ms-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}

为什么同一个班级一遍又一遍地使用？
订单是否重要？
transform-style是什么：preserve-3d吗？
为什么使用不透明的前缀？

Answer 1

为什么同一个班级一遍又一遍地使用？

没有实际的理由在此代码中表达。

可能有一些JavaScript动态启用和禁用CSS中的规则，但您还没有包含它。

订单是否重要？

不在设置不同属性时（或规则相同时）。（spec）。

当属性设置为不同的规则并且具有相同的特异性时，将应用最后一条规则。

transform-style是什么：preserve-3d呢？

它＆＃34; Indicates that the children of the element should be positioned in the 3D-space。＆＃34; （而不是被压扁到他们的父母身上）

为什么使用带不透明度的前缀？

在不透明度属性为实验的浏览器中启用透明度（2015年毫无意义）。

Answer 2

我无法确定为什么会重复相同的规则（.team-member .details），但一个可能的原因是解析;如果浏览器没有识别某些CSS属性，它可能会跳过该属性并执行下一个属性。但是，某些复杂属性可能会导致它跳过整个规则。这些规则也可能是由某些构建器程序生成的。

顺序在最后一个获胜的意义上很重要。如果我的浏览器找到-mybrowser-prop: 3，那么prop: 5和未加前缀的＆＃34; prop＆＃34;支持，它将覆盖第一个属性。如果W3C标准属性的行为被更好地定义（浏览器的早期实现可能与最终的＆＃39;最终＆＃39;你不同，那么这可能是最好的。想）

Preserve-3D有点像＆＃34; position: relative＆＃34;之间的定位差异。和＆＃34; position: absolute＆＃34;对于元素的孩子，但是对于旋转/变换。如果你能找到它的一些图形，它可能最好用视觉证明。

自动扩展前缀的自动化CSS构建器是其中一些前缀的唯一解释。太多的东西会使代码变得混乱，并且所有浏览器都支持不带前缀的opacity属性。

无法理解这个CSS代码

2 个答案: