Html Css选择器-不同级别

我在css编码方面有一个大问题

HTML

CSS

但它不起作用。当div[id=first]悬停时，我需要更改div[id=second]的背景。

Tilde~是同级选择器，但second在HTML中不是first的同级。您需要在包装器中放置第二个，以便~正常工作

---

你不能只使用CSS，一旦你弹出一个元素，你就不能弹出并选择另一个，使用JS或者你需要改变你的标记，你不能这样做。试着用js来做。这里有一个例子：你必须改变你的分数，使第一和第二个div是兄弟姐妹。CSS没有父选择器或闭包。thnx，我真的知道所有的方法，但当我意识到我在等待css4时，在CSS中找不到任何父选择器或闭包时，我非常惊讶。

<div id='wrapper'>
     <div id='first'></div>
     ...
</div>
...
<div id='second'></div>

<style>
#first:hover ~ #second
{
     background:#000;
}
</style>

<style>
#first:hover ~ #second
{
     background:#000;
}
</style>

<div id='wrapper'>
    <!-- Now they share the same parent, so they are siblings -->
    <div id='first'>Hover over first</div>
    <div id='second'>To black out second</div>
</div>

<script>
    var third = document.getElementById('third'),
        fourth = document.getElementById('fourth');

    third.addEventListener('mouseover', function () {
        fourth.className = "blackout"
    });
    third.addEventListener('mouseout', function () {
        fourth.className = "";
    });
</script>

<style>
.blackout {
    background:#000;
}
</style>

<div id='wrapper2'>
    <div id='third'>Hover over third</div>
</div>
<div id='fourth'>To black out fourth</div>