html > 在 CSS 中表示什么？答案

【问题标题】：what does html > signify in CSS?html > 在 CSS 中表示什么？
【发布时间】：2023-03-21 07:57:01
【问题描述】：

我在 Liferay 门户的一些 CSS 文件中有以下 CSS 代码。

html > 表示什么？什么时候应该使用？

.lfr-dockbar-pinned {
    .dockbar {
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
    }

    .pin-dockbar img {
        background-image: url(../images/dockbar/unpin.png);
    }
}

html > .lfr-dockbar-pinned {
    padding-top: 3.45em;
}

【问题讨论】：

很好奇为什么要选择 html > .lfr-dockbar-pinned - 该类是否附加到 body 元素？
是的，它附加到 body 元素。这是代码 - <body class=" controls-hidden lfr-dockbar-pinned guest-community signed-in public-page"> 。不知道他们（Liferay）为什么这样做..
@VikasV 可能是 joomla 模板
我想知道为什么html > 是必要的。也许是 IE6 黑客？通常黑客以html > body 开头，而不仅仅是html >。
@BoltClock 我猜html body {}在这里是等价的

标签： html css css-selectors

【解决方案1】：

具有lfr-dockbar-pinned 类的元素，它是html 元素的直接子后代。见：http://www.w3.org/TR/CSS2/selector.html#child-selectors

【讨论】：

【解决方案2】：

它表示一个元素，它是 html 元素的直接后代（正如@adrian 所说）。

换句话说，它选择父元素为<html>的所有元素，在这种情况下只有<body>

例如

div > p {
   /* This will select all p elements where parent is div */
}

【讨论】：

您的回答似乎不完整。通常，您不会以“换句话说”开头 - 该表达意味着您试图以一种方式说某事，然后您以另一种方式“换句话说”陈述它。

【解决方案3】：

它选择子元素。

例如：body > p 选择所有

元素的直接子元素。

【讨论】：

【解决方案4】：

鉴于此代码（来自您的评论）：

<body class="... lfr-dockbar-pinned ...">

在这种情况下，它会区分具有类lfr-dockbar-pinned 的主体和具有相同类的另一个元素。这允许对每个元素应用不同的样式。

【讨论】：

但是body 是html 的直系后代。
这是唯一真正有意义的案例。 '' 和 '' 应该是 '' 的唯一 DIRECT 后代，因此唯一适用的时间是 '' 标记具有类时。（在本例中为“lfr-dockbar-pinned”）
BoltClock，你是对的。我一时糊涂了。