在具有动态 id 的父 div 悬停时将 CSS 样式应用于具有动态 id 的子跨度答案

【问题标题】：Apply a CSS style to a child span with a dynamic id on hover of a parent div with a dynamic id在具有动态 id 的父 div 悬停时将 CSS 样式应用于具有动态 id 的子跨度
【发布时间】：2019-02-21 10:24:52
【问题描述】：

我有多个父 div，每个 div 都包含多个子跨度。在悬停父 div 时，我只想隐藏这些跨度中的一个。目前，我正在像这样抓取所有父 div：

div[id*=timeline_record_container]

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

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 divs 上，找到timeline_record_default_icons 并将其设置为display: none。但是这不起作用，我是不是点错了？

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

【问题讨论】：

您的 HTML。请交出。
刚刚在图像中添加了 HTML。我更新了问题以更好地反映 HTML。我试图在编辑之前对其进行简化。

标签： html css

【解决方案1】：

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

考虑以下 sn-p：

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

在上面的sn-p中，要访问目标，你可以这样写：

.parent .target {
  …
}

但不是：

.parent > .target {
  …
}

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

.parent > .brat {
  …
}

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

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

【讨论】：