影响其他对象的CSS规则

Question

css规则（例如#testobject1:hover {}）是否可能对另一个对象#testobject2产生影响？

Answer 1

是的，如果您写的内容如下：

#testobject1:hover, #testobject2:hover {}

或#testobject2是#testobject1元素的子元素，它继承了该CSS片段中声明的属性。

否则，不。

Answer 2

不。

唯一可行的方法是#testobject2是#testobject1的后代：

<div id="testobject1">
  <div id="testobject2">
    Hello.
  </div>
</div>

CSS将是：

#testobject1:hover #testobject2 {
  ...
}

Answer 3

如果第二个元素是第一个元素的后代：

#testobject1:hover #testobject2 {}

只有在#testobject2悬停时才会将此规则的css应用于#testobject1。

编辑：有趣的使用方法涉及绝对定位的元素。您可以拥有一个元素，该元素是另一个元素的后代，但在视觉上根本不会出现在另一个元素中。悬停仍然有效。

http://jsfiddle.net/F2psw/

Answer 4

使用CSS，将相同样式应用于两个不同对象的唯一方法就是使用多个选择器构建样式。像这样：

#testobject1:hover, #testobject2 {
  [...]
}