我刚刚了解了CSS中的兄弟组合器，我试图将一些JavaScript操作转移到CSS中，但我遇到了困难。
<div class="box"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="m64 50-4-8h-6v-4c0-1.1-0.9-2-2-2h-18c-1.1 0-2 0.9-2 2v16l2 2h2.536c-0.341 0.588-0.536 1.271-0.536 2 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.729-0.196-1.412-0.536-2h11.073c-0.341 0.588-0.537 1.271-0.537 2 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.729-0.196-1.412-0.537-2h2.537v-6zm-10 0v-6h4.146l3 6h-7.146z"/></svg> <div><input type="text"></div> <div><input type="text"></div> <div><input type="text"></div> </div>我可以用以下方法更改svg图像的颜色：
path{fill:#f00}但是，如果重点关注.box中的输入，我只想更改颜色。
.box svg path~.box div input:focus{fill:#f00}由于他们不是直接兄弟姐妹，我使用前缀将它们带到同一级别。
我究竟做错了什么？
I just learned about the sibling combinator in CSS and I'm trying to shift some of JavaScript operations into CSS but I'm having difficulty.
<div class="box"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="m64 50-4-8h-6v-4c0-1.1-0.9-2-2-2h-18c-1.1 0-2 0.9-2 2v16l2 2h2.536c-0.341 0.588-0.536 1.271-0.536 2 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.729-0.196-1.412-0.536-2h11.073c-0.341 0.588-0.537 1.271-0.537 2 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.729-0.196-1.412-0.537-2h2.537v-6zm-10 0v-6h4.146l3 6h-7.146z"/></svg> <div><input type="text"></div> <div><input type="text"></div> <div><input type="text"></div> </div>I'm able to change the color of my svg image with:
path{fill:#f00}However, I'd only like to change the color if an input in .box is focused.
.box svg path~.box div input:focus{fill:#f00}Since they are not directly siblings, I used prefixes to bring them to the same level.
What am I doing wrong?
最满意答案
如上所述：
〜组合器分离两个选择器，并且只有当它在第一个元素之前时才匹配第二个元素，并且它们共享一个共同的父元素。
因此涉及的元素必须具有相同的父元素。 这不应该与“同一祖先”混淆。 .box是path和input:focus的祖先input:focus但不是父亲的。
因此，您通常不会在右侧指定整个CSS“路径”。 这也意味着你不能将svg中的元素与外部元素配对。
你也有倒退的订单。 假设它完全有效， fill将应用于input:focus 。
移动东西使它工作并利用其他一些技巧给出这样的东西：
input { display:block; } .box input:focus ~ svg { fill:#f00; } <div class="box"> <input type="text"> <input type="text"> <input type="text"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="m64 50-4-8h-6v-4c0-1.1-0.9-2-2-2h-18c-1.1 0-2 0.9-2 2v16l2 2h2.536c-0.341 0.588-0.536 1.271-0.536 2 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.729-0.196-1.412-0.536-2h11.073c-0.341 0.588-0.537 1.271-0.537 2 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.729-0.196-1.412-0.537-2h2.537v-6zm-10 0v-6h4.146l3 6h-7.146z"/></svg> </div>As mentioned here:
The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.
So the involved elements must have the same parent. This should not be confused with "same ancestor". .box is an ancestor of path and input:focus but is not either's parent.
Because of this, you usually don't specify the whole CSS "path" on the right. This also means you can't pair an element inside svg with an element outside.
You also have the order backwards. Assuming it worked at all, fill would be applied to input:focus.
Moving things around to make it work and taking advantage of some other tricks gives something like this:
input { display:block; } .box input:focus ~ svg { fill:#f00; } <div class="box"> <input type="text"> <input type="text"> <input type="text"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="m64 50-4-8h-6v-4c0-1.1-0.9-2-2-2h-18c-1.1 0-2 0.9-2 2v16l2 2h2.536c-0.341 0.588-0.536 1.271-0.536 2 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.729-0.196-1.412-0.536-2h11.073c-0.341 0.588-0.537 1.271-0.537 2 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.729-0.196-1.412-0.537-2h2.537v-6zm-10 0v-6h4.146l3 6h-7.146z"/></svg> </div>更多推荐
发布评论