html - 将 CSS 样式应用到具有动态 id 的子范围，悬停在具有动态 id 的父 div 上

Question

我有多个父 div，每个父 div 包含多个子 span。我只想在悬停父 div 时隐藏这些跨度中的一个。目前，我正在获取所有父级 div，如下所示:

div[id*=timeline_record_container]

每个父 div 都包含字符串 timeline_record_container，后跟唯一的动态 ID。然后我对它的 child 做类似的事情:

span[id*=timeline_record_default_icons] 

它们都有字符串timeline_record_default_icons，后跟唯一/动态ID。将这两个选择器添加在一起，悬停事件会给我这样的结果:

div[id*=timeline_record_container]:hover > span[id*=timeline_record_default_icons] {
    display: none;
}

我的想法是悬停在 timeline_record_container div 上，找到 timeline_record_default_icons 并将其设置为 display: none。但这不起作用，我订购的这些是错误的吗？

编辑:我添加了 HTML。突出显示的跨度是我想要隐藏在图像中顶级 div 内部的跨度。

Answer 1

在您的屏幕截图中，您要隐藏的 span 不是 div[id*=timeline_record_container] 的直接子级。

考虑以下代码片段:

<div class="parent">
  <div class="brat">
    <span class="target">The target</span>
  <div>
</div>

在上面的代码片段中，要访问目标，您可以编写:

.parent .target {
  …
}

但不是:

.parent > .target {
  …
}

您可以将 .brat 作为直接子节点进行访问，因为它位于 .parent 节点下方的第一个嵌套级别。

.parent > .brat {
  …
}

那么，回到你的例子。我认为只需删除 span 之前的 > 符号就可以解决问题。

div[id*=timeline_record_container]:hover span[id*=timeline_record_default_icons] {
    display: none;
}