过度合格的CSS3选择器是否需要使背景位置工作？

Question

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

• Safari 9.0.1
• Chrome 47.0.2526.106
• Firefox 43.0.1

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

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

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

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

这是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为所有longhand background-*属性设置一个值。对于那些明确提供值的longhand属性（如background-color，background-image），使用该值。对于所有其他用户，使用默认值。 background-position的默认值是0% 0%。

来自W3C Spec :(重点是我的）

'background'属性是一个简写属性，用于在样式表中的同一位置设置大多数背景属性。逗号分隔项的数量定义背景图层的数量。给定一个有效的声明，对于每一层，速记首先设置每个“背景图像”，“背景位置”，“背景大小”，“背景重复”，“背景原点”，“背景”的相应图层。 -clip'和'background-attachment'到该属性的初始值，然后在声明中指定为该层指定的任何显式值。

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

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

有问题的片段:(在.strip div，.strip之前使用没有.a的.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，.strip等之前使用.a中的longhand属性而没有.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>