CSS中的组合器[重复]答案

【问题标题】：Combinators in CSS [duplicate]CSS中的组合器[重复]
【发布时间】：2013-06-21 02:39:51
【问题描述】：

大家！我对 HTML 和 CSS 很陌生。我大约在 2 周前了解到。在我的最终网站上，我想在顶部添加一个下拉菜单。我希望当我将鼠标悬停在“商店”选项卡上时，“购物车”选项卡会向下滑动。我只想用 CSS 来做。如何从 CSS 代码中引用另一个 HTML 元素？ > + ~ 和其他组合器有什么区别。示例代码：

#store > #shoppingCart{}

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

在 CSS 中，您提到的符号是：

> 是子组合子；
+ 是相邻的兄弟组合；
~ 是通用兄弟组合子。

它们之间的区别是这样的：

#store > .shoppingCart { background-color: red; }

<div class=shoppingCart>This will not be targeted</div>
<div id=store>
  <div class=shoppingCart>This WILL be targeted</div>
  <div class=shoppingCart>This WILL ALSO be targeted</div>
  <div class=inner>
    <div class=shoppingCart>This will not be targeted</div>
  </div>
</div>

<div class=shoppingCart>This will not be targeted either</div>
<div class=shoppingCart>Neither will this</div>

> 组合器仅选择指定选择器的直接子元素（直接位于第一个下方的元素），因此在这种情况下，仅选择紧接在 #store 下方的子元素。

#store + .shoppingCart { background-color: red; }

<div class=shoppingCart>This will not be targeted</div>

<div id=store>
  <div class=shoppingCart>This will not be targeted</div>
  <div class=shoppingCart>This will not be targeted either</div>
  <div class=inner>
    <div class=shoppingCart>This will not be targeted either</div>
  </div>
</div>

<div class=shoppingCart>This WILL be targeted</div>
<div class=shoppingCart>But this one won't be</div>

+ 组合器选择一个元素，它是第一个元素的直接下一个兄弟元素（位于同一级别的元素，即彼此相邻的元素），因此如果有一个 .shoppingCart 是兄弟元素在#store 之后，它将被选中——但前提是该元素在第一个元素之后；不能以这种方式选择上一个兄弟。

#store ~ .shoppingCart { background-color: red; }

<div class=shoppingCart>This will not be targeted</div>

<div id=store>
  <div class=shoppingCart>This will not be targeted</div>
  <div class=shoppingCart>This will not be targeted either</div>
  <div class=inner>
    <div class=shoppingCart>This will not be targeted either</div>
  </div>
</div>

<div class=shoppingCart>This WILL be targeted</div>
<div class=shoppingCart>This WILL be targeted as well</div>

~ 组合器选择一个元素，它是第一个元素的任何后续同级元素，因此如果有一个 .shoppingCart 作为 #store 的同级跟随，它将被选中。

【讨论】：

您对+ 和~ 的定义并不完全正确：它们都只针对组合器第一部分选择的元素之后的兄弟姐妹；两者之间的区别在于+ 仅选择紧邻的下一个元素（如果匹配），而~ 选择任何下一个元素（立即或其他）。没有组合器可以选择任意（上一个或下一个）类型的兄弟姐妹。
你说的没错，当然。我不知道我在想什么。谢谢。

【解决方案2】：

在这种情况下，#store > #shoppingCart{} 有点没用，#shoppingCart 应该是唯一的，所以你不需要引用任何父母或任何东西，> 本质上就是这样做的。

Child Combinator or >

#a > #b 表示b 元素是a 的子元素（但不是孙子元素等），例如：

   <div id="a">
     <div id="b"></div>     // selects this element
   </div>

Adjacent Sibling Combinator or +

#a + #b 表示在 dom 中直接出现在 a 之后的 b 元素，例如：

   <div id="a"></div>
   <div id="b"></div>       // selects this element

General Sibling Combinator or ~

#a ~ #b 类似于 +，但它是 dom 中的任何兄弟，因此可以使用以下方法：

   <div id="a"></div>
   <div>
     <a></a>
   </div>
   <div id="b"></div>       // selects this element

但是，至于你的问题，你可能想要这样的东西：

#store:hover ~ #shoppingCart {
  // mouse is hovered over #store and we want to affect a sibling
  // with id #shoppingCart that is "later" in the dom
}

更多关于选择器的信息可以在here找到

【讨论】：

请注意，对于+ 和~，选择仅在下游方式中起作用，即#a + #b 仅在HTML 为<div id="a" /><div id="b"> 而不是<div id="b" /><div id="a"> 时起作用；）
您的第一个定义有点误导 - 立即与否，子组合器选择给定元素的 child。
@Adrift 你会建议什么词或短语？
无，只删除立即这个词。

【解决方案3】：

E > F -> 匹配作为元素 E 的子元素的任何 F 元素。
E + F -> 匹配任何紧跟在同级元素 E 之前的 F 元素。
E ~ F -> 前面有一个 E 元素的 F 元素

您可以在此处找到 CSS 选择器的完整规范：http://www.w3.org/TR/css3-selectors/

其他学习资源：http://css.maxdesign.com.au/selectutorial/

【讨论】：

E[foo~="warning"] 这不是组合子。可以在此处找到最新规范：w3.org/TR/css3-selectors，您可以在其中找到 ~ 组合器。

【解决方案4】：

这是您可能正在寻找的链接：http://www.w3schools.com/cssref/css_selectors.asp

我们举几个例子：

#store > #shoppingCart {

   //code

}

这将选择所有具有 ID 购物车并具有 ID 商店父级的元素。

另一个例子：

p~ul {

    //code

}

选择前面有 p 元素的每个 ul 元素

【讨论】：