当我们关注链接时如何为子块添加样式？

Question

代码：

<div id="div1">
    <div class="test1"></div>
    <div class="text1"><a href="#">test1</a>
    </div>
    <div class="test_block">text1</div>
</div>

<div id="div2">
    <div class="test2"></div>
    <div class="text2"><a href="#">test1</a>
    </div>
    <div class="">text2</div>
</div>

当我们关注链接（a:hover）子级时，如何在 css3 上阻止 test_block 获取 css font-size:18px？

P.S.：例如，当我们将鼠标悬停在链接 test1 font-size 上时，text1 将是 18 像素，font-size 对于 text2 将是 14px；

当我们将鼠标悬停在链接上时，test2 font-size for text2 将是 18 像素，font-size for text1 将是 14px;

Answer 1

使用相邻兄弟选择器，+:

.text1,
.text2 {
    font-size: 14px;
}

.test1:hover + .text1,
.test2:hover + .text2 {
    font-size: 18px;
}