Question

我刚学会了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}

由于他们不是直接兄弟姐妹，我使用前缀将它们带到同一级别。

我做错了什么？

Answer 1

如上所述here：

〜组合器分离两个选择器并匹配第二个选择器元素只有在第一个元素之前，并且两者共享一个共同元素父节点。

因此涉及的元素必须具有相同的父元素。这不应与＆＃34;相同的祖先＆＃34;混淆。 CNContactPickerViewController *picker = [CNContactPickerViewController new] ; picker.delegate = self ; picker.popoverPresentationController.sourceView = sourceView ; picker.popoverPresentationController.sourceRect = sourceView.bounds ; picker.popoverPresentationController.permittedArrowDirections = UIPopoverArrowDirectionUp | UIPopoverArrowDirectionDown ; [self presentViewController:picker animated:YES completion:nil] ;是.box和path的祖先，但不是父母之一。

因此，您通常不会指定整个CSS＆＃34;路径＆＃34;在右边。这也意味着您无法将input:focus内的元素与外部元素配对。

您也可以向后退货。假设它完全有效，svg将应用于fill。

为了使其发挥作用并利用其他一些技巧，提出这样的事情：

input:focus

input {
  display:block;
}
.box input:focus ~ svg {
  fill:#f00;
}

使用兄弟组合器与svg和：焦点

1 个答案: