html - CSS :: 親ホバーで色を変更するように設定された子ですが、ホバー自体がホバーされたときにも変更されます

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 年には意味がありました。ただし、現在は、以下:not()で説明するようにセレクターを使用します。

---

CSS は上書きできます。

デモ: 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>