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

CSS有+选择器，它选择紧跟在元素后面的兄弟。如在this question中所讨论的，没有类似的-选择器用于选择立即先于的元素的同级。什么是没有CSS“ - ”选择器的技术原因？

没有-选择器选择前面的兄弟姐妹的原因是什么？更具体地说，使用浏览器执行此操作有什么技术限制（如果有的话）？

让我们假设为参数的缘故，我希望能够写这样的代码：

<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和我也不会来重新构造我的HTML（例如）将对包装在公共div中。任何人都可以指出为什么我不能在CSS中选择前面的兄弟姐妹的技术原因？

来源

2014-01-21 acbabis

什么关系呢？它不存在！ –

@Diodeus也许它可以在某天添加到W3规范:) – acbabis

它们之间的二分法可以忽略不计。为什么你会需要这两个，我想不出一个场景是否需要它，因为如果一个元素之后存在一个兄弟姐妹，为什么你需要反向选择它，对我来说似乎是多余的。 –

更简单的说明：字符-作为与HTML/XML标识符兼容的CSS标识符的一部分有效。如果-是一个运算符，则需要用空格或其他东西来消除歧义，这会使语法解析和缩小更复杂。太容易搞砸的小用途，我们会摆脱它。

来源

2014-01-21 22:56:48 sqykly

它不一定是负号，如果是的话，我怀疑分析时间的增加可以忽略不计。虽然非常有见地。 – acbabis

解析不一定需要更长的时间，只需要花费更长的时间才能获得正式的语法，这样它就不是一个遍布全局的前向断言的黑客工作。还要考虑匹配标签名称为“-foo”的XML文档中的标签。 '-foo'是一个非常好的标识符，但是当你得到提升并且你的下属必须维护那个CSS时，他/她总是想知道你是否指的是元素'-foo'或者前一个兄弟'foo'。 – sqykly

我明白了，但如果将“ - ”作为CSS的一部分是事情的方式，人们可能会认为不推荐使用-foo，对吗？ – acbabis

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进一步工作的方式。

来源

2014-01-21 22:43:07 Joeytje50

这是一个非常重复的答案 - CSS没有它，因为CSS没有它不是答案。 – 2014-01-21 23:03:16

答案是，它只是“旨在[不以此方式工作]”和“这就是CSS如何设计的”。这没什么重复。我从来没有说过“这是这样，因为它是这样的”。 – Joeytje50

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

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” 属性链接的身体本身 - 这当然是一个容纳元素 - 可以被操纵。

（这里是一个填充工具，让你现在可以玩它：https://github.com/Idered/cssParentSelector）

来源

2014-01-21 22:58:15 PhillipKregg

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

回答

相关问题