0

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

#store > #shoppingCart{}
4

4 回答 4

3

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

儿童组合器或>

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

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

相邻兄弟组合器或+

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

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

通用兄弟组合器或~

#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
}

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

于 2013-06-24T14:40:01.160 回答
2

在 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>

组合器选择一个元素，它是第+一个元素的直接下一个兄弟元素（位于同一级别的元素，即彼此相邻的元素），因此如果有 a.shoppingCart是 a 之后的兄弟元素，#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，它将被选中。

于 2013-06-24T14:50:02.267 回答
0

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/

于 2013-06-24T14:34:54.493 回答
0

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

让我们举几个例子：

#store > #shoppingCart {

   //code

}

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

另一个例子：

p~ul {

    //code

}

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

于 2013-06-24T14:35:00.067 回答