Question

一旦它悬停在我身上，我就拥有相同属性的元素。我想知道我是否可以一次设置所有这些元素，如下面的

 #el1:hover el2:hover el3:hover .test{
  }

我知道正常的方式是

  #el1:hover .test{
  }

是否有可能在css上做类似这样或类似的事情，请尽快更新问题标题，因为我发现很难描述问题。

Answer 1

你可以这样做：

#el1:hover, #el2:hover, #el3:hover .test{
  // some code
}

要更深入地了解CSS选择器，请阅读

Answer 2

是的，它会起作用，你只需要在每个类或id之后添加逗号。该逗号将分隔css类或id和样式将适用于所有提到的类，ID或元素引用。

#el1:hover, #el2:hover, #el3:hover .test{ 
  some style
}

CSS群组选择器

使用类，ID或引用在不同元素上应用相同的css样式属性时，称为组选择器。

例如，如果您想要制作以下元素的颜色

<h2>Group Selector Heading</h2>
<p>Group Selector Paragraph</p>
<div class="container">Group Selector Container</div>
<span  id="message">Group Selector Message</span>

您可以使用组选择器方法在所有上述元素上应用颜色。它会最小化代码。

h2, p, .container, #message{
    color:#FF0000;
}

Answer 3

如果父元素的id以el开头，您可以使用[attr^="value"] starts-with attribute selector。

[id^="el"]:hover .test{
  // some code
}

否则，您必须使用,来分隔选择器

#el1:hover .test,
#el2:hover .test,
#el3:hover .test{
 // some code
}

最后，你可以为父元素添加一个公共类，以便你可以直接定位它

<div id="el1" class="common-class">
  <span class="test">..</span>
</div>

<div id="el5" class="common-class">
  <span class="test">..</span>
</div>

并使用

.common-class:hover .test{
  // some code
}

Answer 4

from .basic import *

你能设置多个元素悬停声明只有一个div吗？

4 个答案: