css - 过度限定 CSS3 选择器是使背景位置工作所必需的吗？

Question

我偶然发现了这个 stunning CSS3 3D animation并在以下浏览器中查看:

• Safari 9.0.1
• Chrome 47.0.2526.106
• 火狐 43.0.1

我正在试验网站提供的代码(它是一个不需要外部文件的 HTML 页面，只需要一些有效的外部 HTTP 引用)。我注意到有 CSS 语句 .strip .a .strip .b 等...

据我所知，在这些行上指定 .strip 是对 CSS 选择器的过度限定，因为没有其他类 .a 的情况，类.b 等...以引入任何歧义 - 在这种情况下，这些类名实际上与 id 选择器相同，因为每个类名仅引用一个 HTML 标记。

但是，当我从那些选择器中删除 .strip 时(例如，让选择器仅仅是 .a、.b 等。 .)，相应的 CSS background-position 偏移似乎停止工作，并且这些行的图像条仅显示图像的前导矩形区域，而不是相应指定背景位置偏移处的切片。结果在上述所有浏览器中都是相同的。

我在问题末尾提供了一个代码示例，并提供了展示所产生工件的相应屏幕快照。在下面的代码中，我从 .a、.b、.c 的选择器中删除了 .strip和 .d 行。您可以在下图中看到这四个 strip 的位置似乎不正确。

这是 webkit、mozkit 中的错误，还是我对这种选择器的 CSS 不了解？

body {
  background: #000;
  color: rgb(236, 132, 57)
}
h1 {
  font: small-caps 167% Arial, Helvetica, sans-serif
}
#container {
  text-align: center;
  margin: 0 auto;
  top: 450px;
  width: 550px;
  -moz-perspective: 900px;
  -webkit-perspective: 900
}
#container:hover * {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused
}
#frame {
  width: 33px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;  /* translate must be last */
  -moz-transform: rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px, -70px, 50px);
  -webkit-transform: rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px, -70px, 50px)
}
.strip {
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-animation: spin 25s infinite linear;
  -webkit-animation: spin 25s infinite linear
}
.strip div {
  position: absolute;
  background: #000 url(http://baloziproductions.com/thailand-sunrise.jpg);  /* background image is 792px 320px, try with green-hills or thailand-sunrise.jpg */
  border: solid rgb(145, 87, 0);
  border-width: thin 0;
  height: 320px;
  width: 34px;
  opacity: 1;
}
.a {
  background-position: 0 0;
  -moz-transform: rotateY(0deg) translateZ(124px);
  -webkit-transform: rotateY(0deg) translateZ(124px)
}
.b {
  background-position: 759px 0;
  -moz-transform: rotateY(15deg) translateZ(124px);
  -webkit-transform: rotateY(15deg) translateZ(124px)
}
.c {
  background-position: 726px 0;
  -moz-transform: rotateY(30deg) translateZ(124px);
  -webkit-transform: rotateY(30deg) translateZ(124px)
}
.d {
  background-position: 693px 0;
  -moz-transform: rotateY(45deg) translateZ(124px);
  -webkit-transform: rotateY(45deg) translateZ(124px)
}
.strip .e {
  background-position: 660px 0;
  -moz-transform: rotateY(60deg) translateZ(124px);
  -webkit-transform: rotateY(60deg) translateZ(124px)
}
.strip .f {
  background-position: 627px 0;
  -moz-transform: rotateY(75deg) translateZ(124px);
  -webkit-transform: rotateY(75deg) translateZ(124px)
}
.strip .g {
  background-position: 594px 0;
  -moz-transform: rotateY(90deg) translateZ(124px);
  -webkit-transform: rotateY(90deg) translateZ(124px)
}
.strip .h {
  background-position: 561px 0;
  -moz-transform: rotateY(105deg) translateZ(124px);
  -webkit-transform: rotateY(105deg) translateZ(124px)
}
.strip .i {
  background-position: 528px 0;
  -moz-transform: rotateY(120deg) translateZ(124px);
  -webkit-transform: rotateY(120deg) translateZ(124px)
}
.strip .j {
  background-position: 495px 0;
  -moz-transform: rotateY(135deg) translateZ(124px);
  -webkit-transform: rotateY(135deg) translateZ(124px)
}
.strip .k {
  background-position: 462px 0;
  -moz-transform: rotateY(150deg) translateZ(124px);
  -webkit-transform: rotateY(150deg) translateZ(124px)
}
.strip .l {
  background-position: 429px 0;
  -moz-transform: rotateY(165deg) translateZ(124px);
  -webkit-transform: rotateY(165deg) translateZ(124px)
}
.strip .m {
  background-position: 396px 0;
  -moz-transform: rotateY(180deg) translateZ(124px);
  -webkit-transform: rotateY(180deg) translateZ(124px)
}
.strip .n {
  background-position: 363px 0;
  -moz-transform: rotateY(195deg) translateZ(124px);
  -webkit-transform: rotateY(195deg) translateZ(124px)
}
.strip .o {
  background-position: 330px 0;
  -moz-transform: rotateY(210deg) translateZ(124px);
  -webkit-transform: rotateY(210deg) translateZ(124px)
}
.strip .p {
  background-position: 297px 0;
  -moz-transform: rotateY(225deg) translateZ(124px);
  -webkit-transform: rotateY(225deg) translateZ(124px)
}
.strip .q {
  background-position: 264px 0;
  -moz-transform: rotateY(240deg) translateZ(124px);
  -webkit-transform: rotateY(240deg) translateZ(124px)
}
.strip .r {
  background-position: 231px 0;
  -moz-transform: rotateY(255deg) translateZ(124px);
  -webkit-transform: rotateY(255deg) translateZ(124px)
}
.strip .s {
  background-position: 198px 0;
  -moz-transform: rotateY(270deg) translateZ(124px);
  -webkit-transform: rotateY(270deg) translateZ(124px)
}
.strip .t {
  background-position: 165px 0;
  -moz-transform: rotateY(285deg) translateZ(124px);
  -webkit-transform: rotateY(285deg) translateZ(124px)
}
.strip .u {
  background-position: 132px 0;
  -moz-transform: rotateY(300deg) translateZ(124px);
  -webkit-transform: rotateY(300deg) translateZ(124px)
}
.strip .v {
  background-position: 99px 0;
  -moz-transform: rotateY(315deg) translateZ(124px);
  -webkit-transform: rotateY(315deg) translateZ(124px)
}
.strip .w {
  background-position: 66px 0;
  -moz-transform: rotateY(330deg) translateZ(124px);
  -webkit-transform: rotateY(330deg) translateZ(124px)
}
.strip .x {
  background-position: 33px 0;
  -moz-transform: rotateY(345deg) translateZ(124px);
  -webkit-transform: rotateY(345deg) translateZ(124px)
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotateY(0)
  }
  to {
    -moz-transform: rotateY(-360deg)
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0)
  }
  to {
    -webkit-transform: rotateY(-360deg)
  }
}

<div id="container">
  <h1>Image Wrapped Around A Spinning strip</h1>
  <div id="frame">
    <div class="strip">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
      <div class="d"></div>
      <div class="e"></div>
      <div class="f"></div>
      <div class="g"></div>
      <div class="h"></div>
      <div class="i"></div>
      <div class="j"></div>
      <div class="k"></div>
      <div class="l"></div>
      <div class="m"></div>
      <div class="n"></div>
      <div class="o"></div>
      <div class="p"></div>
      <div class="q"></div>
      <div class="r"></div>
      <div class="s"></div>
      <div class="t"></div>
      <div class="u"></div>
      <div class="v"></div>
      <div class="w"></div>
      <div class="x"></div>
    </div>
  </div>
</div>

Answer 1

由于在 .strip div 选择器 中如何指定背景，因此需要过于具体的选择器。

.strip div {
  position: absolute;
  background: #000 url(http://baloziproductions.com/thailand-sunrise.jpg); /* this causes the problem */
  border: solid rgb(145, 87, 0);
  border-width: thin 0;
  height: 320px;
  width: 34px;
  opacity: 1;
}

当 background 简写属性用于设置背景时，UA 为所有简写 background-* 属性设置一个值。对于那些明确提供值的普通属性(如 background-color、background-image)，使用该值。对于所有其他的，使用默认值。 background-position 的默认值为 0% 0%。

From W3C Spec: ^{(emphasis is mine)}

The ‘background’ property is a shorthand property for setting most background properties at the same place in the style sheet. The number of comma-separated items defines the number of background layers. Given a valid declaration, for each layer the shorthand first sets the corresponding layer of each of ‘background-image’, ‘background-position’, ‘background-size’, ‘background-repeat’, ‘background-origin’, ‘background-clip’ and ‘background-attachment’ to that property's initial value, then assigns any explicit values specified for this layer in the declaration.

因此，一个background-position 设置已经隐式存在于.strip div 上。当 .strip 从 .a、.b、.c 选择器中移除时，它们变得不那么具体与 .strip div 相比，不会修改默认背景位置。

.strip div 的特殊性是011，因为它只有一个类选择器和一个类型选择器。 .strip .a 是 020，因为它有 2 个类选择器，没有类型或 ID 选择器。 .a 的特殊性是 010，因为它只有一个类选择器，没有类型或 ID 选择器。

有问题的代码段:(在 .strip div 中使用速记属性，在 .a 之前没有 .strip，.b 等)

body {
  background: #000;
  color: rgb(236, 132, 57)
}
h1 {
  font: small-caps 167% Arial, Helvetica, sans-serif
}
#container {
  text-align: center;
  margin: 0 auto;
  top: 450px;
  width: 550px;
  -moz-perspective: 900px;
  -webkit-perspective: 900
}
#container:hover * {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused
}
#frame {
  width: 33px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform: rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px, -70px, 50px);
  -webkit-transform: rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px, -70px, 50px)
}
.strip {
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-animation: spin 25s infinite linear;
  -webkit-animation: spin 25s infinite linear
}
.strip div {
  position: absolute;
  background: #000 url(http://baloziproductions.com/thailand-sunrise.jpg);
  border: solid rgb(145, 87, 0);
  border-width: thin 0;
  height: 320px;
  width: 34px;
  opacity: 1;
}
.a {
  background-position: 0 0;
  -moz-transform: rotateY(0deg) translateZ(124px);
  -webkit-transform: rotateY(0deg) translateZ(124px)
}
.b {
  background-position: 759px 0;
  -moz-transform: rotateY(15deg) translateZ(124px);
  -webkit-transform: rotateY(15deg) translateZ(124px)
}
.c {
  background-position: 726px 0;
  -moz-transform: rotateY(30deg) translateZ(124px);
  -webkit-transform: rotateY(30deg) translateZ(124px)
}
.d {
  background-position: 693px 0;
  -moz-transform: rotateY(45deg) translateZ(124px);
  -webkit-transform: rotateY(45deg) translateZ(124px)
}
.e {
  background-position: 660px 0;
  -moz-transform: rotateY(60deg) translateZ(124px);
  -webkit-transform: rotateY(60deg) translateZ(124px)
}
.f {
  background-position: 627px 0;
  -moz-transform: rotateY(75deg) translateZ(124px);
  -webkit-transform: rotateY(75deg) translateZ(124px)
}
.g {
  background-position: 594px 0;
  -moz-transform: rotateY(90deg) translateZ(124px);
  -webkit-transform: rotateY(90deg) translateZ(124px)
}
.h {
  background-position: 561px 0;
  -moz-transform: rotateY(105deg) translateZ(124px);
  -webkit-transform: rotateY(105deg) translateZ(124px)
}
.i {
  background-position: 528px 0;
  -moz-transform: rotateY(120deg) translateZ(124px);
  -webkit-transform: rotateY(120deg) translateZ(124px)
}
.j {
  background-position: 495px 0;
  -moz-transform: rotateY(135deg) translateZ(124px);
  -webkit-transform: rotateY(135deg) translateZ(124px)
}
.k {
  background-position: 462px 0;
  -moz-transform: rotateY(150deg) translateZ(124px);
  -webkit-transform: rotateY(150deg) translateZ(124px)
}
.l {
  background-position: 429px 0;
  -moz-transform: rotateY(165deg) translateZ(124px);
  -webkit-transform: rotateY(165deg) translateZ(124px)
}
.m {
  background-position: 396px 0;
  -moz-transform: rotateY(180deg) translateZ(124px);
  -webkit-transform: rotateY(180deg) translateZ(124px)
}
.n {
  background-position: 363px 0;
  -moz-transform: rotateY(195deg) translateZ(124px);
  -webkit-transform: rotateY(195deg) translateZ(124px)
}
.o {
  background-position: 330px 0;
  -moz-transform: rotateY(210deg) translateZ(124px);
  -webkit-transform: rotateY(210deg) translateZ(124px)
}
.p {
  background-position: 297px 0;
  -moz-transform: rotateY(225deg) translateZ(124px);
  -webkit-transform: rotateY(225deg) translateZ(124px)
}
.q {
  background-position: 264px 0;
  -moz-transform: rotateY(240deg) translateZ(124px);
  -webkit-transform: rotateY(240deg) translateZ(124px)
}
.r {
  background-position: 231px 0;
  -moz-transform: rotateY(255deg) translateZ(124px);
  -webkit-transform: rotateY(255deg) translateZ(124px)
}
.s {
  background-position: 198px 0;
  -moz-transform: rotateY(270deg) translateZ(124px);
  -webkit-transform: rotateY(270deg) translateZ(124px)
}
.t {
  background-position: 165px 0;
  -moz-transform: rotateY(285deg) translateZ(124px);
  -webkit-transform: rotateY(285deg) translateZ(124px)
}
.u {
  background-position: 132px 0;
  -moz-transform: rotateY(300deg) translateZ(124px);
  -webkit-transform: rotateY(300deg) translateZ(124px)
}
.v {
  background-position: 99px 0;
  -moz-transform: rotateY(315deg) translateZ(124px);
  -webkit-transform: rotateY(315deg) translateZ(124px)
}
.w {
  background-position: 66px 0;
  -moz-transform: rotateY(330deg) translateZ(124px);
  -webkit-transform: rotateY(330deg) translateZ(124px)
}
.x {
  background-position: 33px 0;
  -moz-transform: rotateY(345deg) translateZ(124px);
  -webkit-transform: rotateY(345deg) translateZ(124px)
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotateY(0)
  }
  to {
    -moz-transform: rotateY(-360deg)
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0)
  }
  to {
    -webkit-transform: rotateY(-360deg)
  }
}

<div id="container">
  <h1>Image Wrapped Around A Spinning strip</h1>
  <div id="frame">
    <div class="strip">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
      <div class="d"></div>
      <div class="e"></div>
      <div class="f"></div>
      <div class="g"></div>
      <div class="h"></div>
      <div class="i"></div>
      <div class="j"></div>
      <div class="k"></div>
      <div class="l"></div>
      <div class="m"></div>
      <div class="n"></div>
      <div class="o"></div>
      <div class="p"></div>
      <div class="q"></div>
      <div class="r"></div>
      <div class="s"></div>
      <div class="t"></div>
      <div class="u"></div>
      <div class="v"></div>
      <div class="w"></div>
      <div class="x"></div>
    </div>
  </div>
</div>

---

不使用简写的background属性，如果直接使用background-color，background-image那么.strip 在 .a、.b、.c 等之前不需要，因为没有 background-position 在更高特异性的选择器中。

.strip div {
  position: absolute;
  background-color: #000; /* changed */
  background-image: url(http://baloziproductions.com/thailand-sunrise.jpg); /* changed */
  border: solid rgb(145, 87, 0);
  border-width: thin 0;
  height: 320px;
  width: 34px;
  opacity: 1;
}

固定代码段:(在 .strip div 中使用普通属性并且在 .a 之前没有使用 .strip， .b 等)

body {
  background: #000;
  color: rgb(236, 132, 57)
}
h1 {
  font: small-caps 167% Arial, Helvetica, sans-serif
}
#container {
  text-align: center;
  margin: 0 auto;
  top: 450px;
  width: 550px;
  -moz-perspective: 900px;
  -webkit-perspective: 900
}
#container:hover * {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused
}
#frame {
  width: 33px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* translate must be last */
  -moz-transform: rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px, -70px, 50px);
  -webkit-transform: rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px, -70px, 50px)
}
.strip {
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-animation: spin 25s infinite linear;
  -webkit-animation: spin 25s infinite linear
}
.strip div {
  position: absolute;
  background-color: #000;
  background-image: url(http://baloziproductions.com/thailand-sunrise.jpg);
  border: solid rgb(145, 87, 0);
  border-width: thin 0;
  height: 320px;
  width: 34px;
  opacity: 1;
}
.a {
  background-position: 0 0;
  -moz-transform: rotateY(0deg) translateZ(124px);
  -webkit-transform: rotateY(0deg) translateZ(124px)
}
.b {
  background-position: 759px 0;
  -moz-transform: rotateY(15deg) translateZ(124px);
  -webkit-transform: rotateY(15deg) translateZ(124px)
}
.c {
  background-position: 726px 0;
  -moz-transform: rotateY(30deg) translateZ(124px);
  -webkit-transform: rotateY(30deg) translateZ(124px)
}
.d {
  background-position: 693px 0;
  -moz-transform: rotateY(45deg) translateZ(124px);
  -webkit-transform: rotateY(45deg) translateZ(124px)
}
.e {
  background-position: 660px 0;
  -moz-transform: rotateY(60deg) translateZ(124px);
  -webkit-transform: rotateY(60deg) translateZ(124px)
}
.f {
  background-position: 627px 0;
  -moz-transform: rotateY(75deg) translateZ(124px);
  -webkit-transform: rotateY(75deg) translateZ(124px)
}
.g {
  background-position: 594px 0;
  -moz-transform: rotateY(90deg) translateZ(124px);
  -webkit-transform: rotateY(90deg) translateZ(124px)
}
.h {
  background-position: 561px 0;
  -moz-transform: rotateY(105deg) translateZ(124px);
  -webkit-transform: rotateY(105deg) translateZ(124px)
}
.i {
  background-position: 528px 0;
  -moz-transform: rotateY(120deg) translateZ(124px);
  -webkit-transform: rotateY(120deg) translateZ(124px)
}
.j {
  background-position: 495px 0;
  -moz-transform: rotateY(135deg) translateZ(124px);
  -webkit-transform: rotateY(135deg) translateZ(124px)
}
.k {
  background-position: 462px 0;
  -moz-transform: rotateY(150deg) translateZ(124px);
  -webkit-transform: rotateY(150deg) translateZ(124px)
}
.l {
  background-position: 429px 0;
  -moz-transform: rotateY(165deg) translateZ(124px);
  -webkit-transform: rotateY(165deg) translateZ(124px)
}
.m {
  background-position: 396px 0;
  -moz-transform: rotateY(180deg) translateZ(124px);
  -webkit-transform: rotateY(180deg) translateZ(124px)
}
.n {
  background-position: 363px 0;
  -moz-transform: rotateY(195deg) translateZ(124px);
  -webkit-transform: rotateY(195deg) translateZ(124px)
}
.o {
  background-position: 330px 0;
  -moz-transform: rotateY(210deg) translateZ(124px);
  -webkit-transform: rotateY(210deg) translateZ(124px)
}
.p {
  background-position: 297px 0;
  -moz-transform: rotateY(225deg) translateZ(124px);
  -webkit-transform: rotateY(225deg) translateZ(124px)
}
.q {
  background-position: 264px 0;
  -moz-transform: rotateY(240deg) translateZ(124px);
  -webkit-transform: rotateY(240deg) translateZ(124px)
}
.r {
  background-position: 231px 0;
  -moz-transform: rotateY(255deg) translateZ(124px);
  -webkit-transform: rotateY(255deg) translateZ(124px)
}
.s {
  background-position: 198px 0;
  -moz-transform: rotateY(270deg) translateZ(124px);
  -webkit-transform: rotateY(270deg) translateZ(124px)
}
.t {
  background-position: 165px 0;
  -moz-transform: rotateY(285deg) translateZ(124px);
  -webkit-transform: rotateY(285deg) translateZ(124px)
}
.u {
  background-position: 132px 0;
  -moz-transform: rotateY(300deg) translateZ(124px);
  -webkit-transform: rotateY(300deg) translateZ(124px)
}
.v {
  background-position: 99px 0;
  -moz-transform: rotateY(315deg) translateZ(124px);
  -webkit-transform: rotateY(315deg) translateZ(124px)
}
.w {
  background-position: 66px 0;
  -moz-transform: rotateY(330deg) translateZ(124px);
  -webkit-transform: rotateY(330deg) translateZ(124px)
}
.x {
  background-position: 33px 0;
  -moz-transform: rotateY(345deg) translateZ(124px);
  -webkit-transform: rotateY(345deg) translateZ(124px)
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotateY(0)
  }
  to {
    -moz-transform: rotateY(-360deg)
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0)
  }
  to {
    -webkit-transform: rotateY(-360deg)
  }
}

<div id="container">
  <h1>Image Wrapped Around A Spinning strip</h1>
  <div id="frame">
    <div class="strip">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
      <div class="d"></div>
      <div class="e"></div>
      <div class="f"></div>
      <div class="g"></div>
      <div class="h"></div>
      <div class="i"></div>
      <div class="j"></div>
      <div class="k"></div>
      <div class="l"></div>
      <div class="m"></div>
      <div class="n"></div>
      <div class="o"></div>
      <div class="p"></div>
      <div class="q"></div>
      <div class="r"></div>
      <div class="s"></div>
      <div class="t"></div>
      <div class="u"></div>
      <div class="v"></div>
      <div class="w"></div>
      <div class="x"></div>
    </div>
  </div>
</div>