Question

CSS有+选择器，它选择紧跟元素后的兄弟。正如this question中所讨论的，没有类似的-选择器用于选择在元素之前的兄弟姐妹。

没有-选择器选择前一个兄弟的原因是什么？更具体地说，如果有浏览器这样做有什么技术限制吗？

让我们假设为了论证，我希望能够编写这样的代码：

<style>
    p:hover, img:hover + p {
        background-color: yellow
    }
    img:hover, p:hover - img {
        outline: solid 2px yellow
    }
</style>
...

<img src="image.png"/>
<p>Description of image 1</p>

<img src="image1.png"/>
<p>Description of image 2</p>

理想情况下，我不必编写任何Javascript，我也不必通过（例如）将公式包装在公共div中来重构我的HTML。任何人都可以指出我无法在CSS中选择前一个兄弟姐妹的技术原因吗？

Answer 1

CSS旨在只能选择以下兄弟姐妹和其他选择者的子女。这就是CSS的设计方式，即使我认为它在某些情况下也会受到限制，我希望这种情况很快就会改变，你现在必须忍受它（可能需要更长时间，因为有目前还没有关于添加父级或前级兄弟选择器的计划。）

在此特定示例中，您应该将<img>和<p>标记分组到一个容器元素中，例如<div>，并应用:hover伪 - 等级到那个div。例如：

<style>
    div:hover p {
        background-color: yellow
    }
    div:hover img {
        outline: solid 2px yellow
    }
</style>
...
<div>
    <img src="image.png"/>
    <p>Description of image 1</p>
</div>
<div>
    <img src="image1.png"/>
    <p>Description of image 2</p>
</div>

这将与您尝试的效果完全相同，但您也必须修改HTML布局。

This article可能很有趣。它分析了CSS的工作方式。

Answer 2

更简单的解释：字符-作为CSS标识符的一部分有效，与HTML / XML标识符兼容。如果-是一个运算符，则需要用空格或其他东西消除歧义，这会使语法更难以解析和缩小。太容易搞砸了，我们就会把它拿出去。

Answer 3

没有“ - ”符号，但类似的东西可能正在路上。

w3c正在研究一种确定选择器主题的方法。它可以作为父选择器来完成你想要的东西。

Here is info on w3.org

Here's an article offering a sneak peak from Smashing Magazine

以下是一个如何运作的示例：

body! header a.styleSwitcher:hover {
   background: red;
}

正如您所看到的，通过将鼠标悬停在“styleSwitcher”类的链接上，可以操纵主体本身的属性 - 当然是包含元素的属性。

（这是一个polyfill，现在你可以玩它：https://github.com/Idered/cssParentSelector）

没有CSS“ - ”选择器的技术原因是什么？

3 个答案: