用于显示后代的 CSS 选择器无法正常工作

Posted 2023-03-06

【中文标题】用于显示后代的 CSS 选择器无法正常工作

【英文标题】：CSS selector for showing descendants doesn't work properly

【发布时间】：2012-11-27 22:06:10

【问题描述】：

我的 html 是（只有标题）

<div id="msg_wrapper">
    <div class="msg_header media unread>
      <a class="pull-left"></a>
      <div class="media-body">
        <h4 class="media-heading">
        </h4>
      </div>
    </div>
    <div id="side" class="pull-right">
      <div id="sent_at">
        <div class="timeago" >
        </div>
      </div>
      <div id="msg_header_side">
        <div id="msg_header_icons">
        </div>
          </div>
        </div>
      </div>

css 是

    .media.unread:hover + #side  #msg_header_side
    visibility: visible;
    

    #sent_at 
        float:right;
    
    .msg_header
        position: relative;
        margin-bottom: 10px;
    

    #msg_header_side
        visibility: hidden;
    
    #msg_header_icons

        background-color: transparent;
        float: right;
    

    #side
        position: absolute;
        top: 0;
        right: 0;
    

    #msg_wrapper
        position: relative;
    

我创建了一个带有类似标签的jsfiddle，并添加了颜色来解释情况

蓝色 (#msg_header_side) 是一个带有选项的部分，当将鼠标悬停在黄色 (.msg_header) 的任何部分时应该出现的选项 问题是当前选择器（我能做的最好的）仅在鼠标光标为黄色时才显示蓝色。

像这样（屏幕截图没有捕捉到鼠标光标 - 它是黄色的）：

当光标为红色时 (#side) - 蓝色消失

像这样（屏幕截图没有捕捉到鼠标光标 - 它是红色的）：

我的选择器是.media.unread:hover + #side #msg_header_side 我的理解是“媒体类和悬停时未读并与 msg_header_side 作为子级将具有可见性：可见性。 效果不太好..

【问题讨论】：

.media.unread:hover + #side #msg_header_side 匹配 #msg_header_side 的 descandant 的 #side 紧跟在 .media.unread:hover 之前根据 pattern-matching 的兄弟姐妹。这不是你给出的定义。

那么有没有办法修复选择器？

【参考方案1】：

我不确定“+”号，但这应该是一些问题：

.media.unread:hover,
#side  #msg_header_side
visibility: visible;

【讨论】：

不，这是完全错误的。逗号指定第二部分是一个单独的选择器。这根本不是 OP 想要的。

【参考方案2】：

您需要添加一个额外的选择器来匹配 #msg_header_side 作为 #side:hover 的除数

.media.unread:hover + #side #msg_header_side, #side:hover #msg_header_side

希望这是你想要的。

【讨论】：

这非常接近，但 #side:hover 也会显示 #msg_header_side。我需要在黄色和红色上显示蓝色（在 jsfiddle 上）。你的解决方案是黄色或红色。

@Foxedd - 因为#side 不是 .media 的 descandant，所以只要光标在 #side 上，.media 就会失去 :hover 状态。将#side 放入 .media 将解决您的问题。

【参考方案3】：

我不太确定您要达到什么目的，但我认为您想采用黄色背景的 element1 和具有红色背景的 element2，如果您将两者都悬停，则应该出现蓝色的 element3。首先你应该意识到你的黄色元素没有包围红色元素，因为它们是兄弟元素，堆叠顺序告诉我们红色元素通常在它的前一个兄弟元素的顶部，这个兄弟元素必须是黄色的。通过输入红色元素，您将留下黄色元素和您的选择器：

原文：

.media.unread:hover + #side  #msg_header_side 
    visibility: visible;

告诉浏览器向我们显示具有#msg_header_side(blue) id 的元素，如果悬停带有类 .media.unread(yellow) 的#side(red) 同级元素，它必须是#side(red) 元素的子元素。

要告诉浏览器在红色元素也悬停时显示该元素，您必须将代码附加到第一行并进行如下更改：

改变：

.media.unread:hover + #side  #msg_header_side, #side:hover  #msg_header_side 
    visibility: visible;

如您所见，只有第一行被更改。

附：我为我写的一团糟感到抱歉:) 你也可以重新考虑你的选择器命名有这么多的类和 ID，它肯定会更好。