如何用CSS选择父母兄弟姐妹？

Question

当我将鼠标悬停在第一个<li>上时，我想要更改background-color课程的.arrow-tip。你能帮我找到正确的CSS规则吗？

HTML：

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</nav>
<div class="arrow-tip">A triangle tip for the nav menu</div>

CSS：

nav > ul > li:nth-child(1):hover ~ .arrow-tip {
    background-color: #FF0;
}

我想要一个PURE CSS解决方案。

Answer 1

不，目前无法使用CSS，read this。

但是，我猜你可以做一些类似JsFiddle的事情。

＆＃13;

＆＃13;

ul {
    list-style: none;
    padding: 0;
    width: 45px;
    text-align: center;
    position: relative;
}
li {
    background: silver;
    margin: 0 0 5px;
}
li:after {
    content:"\25be";
    font-size: 2em;
    position: absolute;
    left: 10px;
    top: 35px;
}
li:hover:after {
    z-index: 1;
}
li:nth-child(1):hover:after {
    color: red;
}
li:nth-child(2):hover:after {
    color: blue;
}

＆＃13;

<ul>
    <li>A</li>
    <li>B</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

编辑：这是OP真正希望实现的JsFiddle。

如果您有兴趣，请按照上述评论进行操作。

＆＃13;

＆＃13;

.menu {
    list-style: none;
    padding: 0;
}
.menu > li {
    position: relative;
    background: fuchsia;
    width: 100px;
    height: 20px;
    display: inline-block;
    vertical-align: top;
}
.submenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    list-style: none;
    padding: 30px 0 0;
    margin: 0;
}
.submenu > li {
    background: fuchsia;
    display: block;
}
.submenu > li:before {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid aqua;
    z-index: -1;
}
/* hide */
.submenu {
    display: none;
}
/* hover */
.menu > li:hover {
    background: aqua;
}
.menu > li:hover > ul {
    display: block;
}
.submenu > li:hover {
    background: aqua;
}
.submenu li:not(:nth-child(1)):hover:before {
    border-bottom: 10px solid fuchsia;
    z-index: 0;
}

＆＃13;

<ul class="menu">
    <li>one
        <ul class="submenu">
            <li>a</li>
            <li>b</li>
            <li>x</li>
            <li>y</li>
            <li>z</li>
        </ul>
    </li>
    <li>two
        <ul class="submenu">
            <li>c</li>
            <li>d</li>
        </ul>
    </li>
    <li>three
        <ul class="submenu">
            <li>e</li>
            <li>f</li>
        </ul>
    </li>
    <li>four
        <ul class="submenu">
            <li>g</li>
            <li>h</li>
        </ul>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;