CSS中的组合器[重复]

Question

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

#商店>#shoppingCart{}

Answer 1

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

子组合器或>

#a>#b是指b元素，该元素是的子元素（但不是孙子，依此类推）一，例如：

<div id=“a”><div id=“b”></div>//选择此元素</div>

相邻同级组合器或+

#a+#b是指b紧跟其后的元素一在dom中，例如：

<div id=“a”></div><div id=“b”></div>//选择此元素

通用同级组合器或~

#a~#b号类似于+，但它是dom中其后的任何同级，因此以下操作可能有效：

<div id=“a”></div><div><a></a></div><div id=“b”></div>//选择此元素

然而，对于您的问题，您可能希望这样：

#商店：悬停~#shoppingCart{//鼠标悬停在#store上，我们想影响兄弟姐妹//id#shoppingCart在dom中“稍后”}

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

Answer 2

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

• >是子组合子；
• +是相邻兄弟组合子；
• ~是一般的兄弟组合子。

它们之间的区别是：

#商店>.购物车{背景颜色：红色；}

<div class=shoppingCart>这不是目标<div id=store><div class=shoppingCart>这将成为目标<div class=shoppingCart>这也将成为目标<div class=内部><div class=shoppingCart>这不是目标</div></div><div class=shoppingCart>这也不是目标<div class=shoppingCart>这也不会

这个>combinator只选择指定选择器的直接子元素（第一个子元素正下方的元素），因此，在本例中，只选择紧邻其下方的元素#商店.

#商店+购物车{背景颜色：红色；}

<div class=shoppingCart>这不是目标<div id=store><div class=shoppingCart>这不是目标<div class=shoppingCart>这也不是目标<div class=内部><div class=shoppingCart>这也不是目标</div></div><div class=shoppingCart>这将成为目标<div class=shoppingCart>但这个不是

这个+combinator选择一个元素，该元素是第一个元素的下一个同级元素（同级元素，即相邻的元素），因此如果存在.购物车那是一个兄弟姐妹#商店，它将被选中，但仅当该元素位于第一个元素之后时；不能以这种方式选择上一个同级。

#商店~.购物车{背景颜色：红色；}

<div class=shoppingCart>这不是目标<div id=store><div class=shoppingCart>这不是目标<div class=shoppingCart>这也不是目标<div class=内部><div class=shoppingCart>这也不是目标</div></div><div class=shoppingCart>这将成为目标<div class=shoppingCart>这也是目标

这个~combinator选择第一个元素的任何后续同级元素，因此如果有.购物车作为的兄弟姐妹#商店，它将被选中。

Answer 3

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

让我们举几个例子：

#商店>#购物车{//代码}

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

另一个例子：

p~ul（磅）{//代码}

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

Answer 4

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

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

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