CSS :: child设置为在父悬停时更改颜色，但在悬停时也会更改

Question

我有<a>个<span>个孩子。我写了一些CSS，当父母盘旋时，它改变了孩子们的边框颜色，但是当我悬停孩子时它也改变了边框颜色，不应该这样做。

a {
    padding: 50px;
    border: 1px solid black;
}

a span {
    position: absolute;
    top: 200px;
    padding: 30px;
    border: 10px solid green;
}

a:hover span {
    border: 10px solid red;
}   

<a>
    Parent text
    <span>Child text</span>    
</a>

Answer 1

更新

以下对2013年有意义。但是，现在，我将使用below所述的:not()选择器。

---

CSS可以被覆盖。

DEMO：http://jsfiddle.net/persianturtle/J4SUb/

使用此：

.parent {
  padding: 50px;
  border: 1px solid black;
}

.parent span {
  position: absolute;
  top: 200px;
  padding: 30px;
  border: 10px solid green;
}

.parent:hover span {
  border: 10px solid red;
}

.parent span:hover {
  border: 10px solid green;
}

<a class="parent">
    Parent text
    <span>Child text</span>    
</a>

Answer 2

如果您不关心支持旧浏览器，可以使用:not()排除该元素：

.parent:hover span:not(:hover) {
    border: 10px solid red;
}

演示：http://jsfiddle.net/vz9A9/1/

如果您做想要支持它们，我想您将不得不使用JavaScript或再次覆盖CSS属性：

.parent span:hover {
    border: 10px solid green;
}