Html 将#a悬停到样式#1，其中#1是#b的子元素，而#b是#a的兄弟元素_Html_Css

Html 将#a悬停到样式#1，其中#1是#b的子元素，而#b是#a的兄弟元素

html css

Html 将#a悬停到样式#1，其中#1是#b的子元素，而#b是#a的兄弟元素,html,css,Html,Css,这是我的html代码 <body> <div id="b"> <div id="one"><div> </div> </div id="a"> </div> </body> CSS不允许您选择同级元素并对其应用样式。如果您想保留DOM结构，您需要使用Javascript来实现您想要的如果你有点灵活地改变HTML结构，考虑将“A”和“B”div封装在容器

这是我的html代码

<body>

  <div id="b">    
    <div id="one"><div>
  </div>

  </div id="a">    
  </div>

</body>

CSS不允许您选择同级元素并对其应用样式。如果您想保留DOM结构，您需要使用Javascript来实现您想要的

如果你有点灵活地改变HTML结构，考虑将“A”和“B”div封装在容器中，并为容器应用HORD样式而不是“A”（但是，这和“B.HOFER”一样好）

< P> +和~选择器得到当前节点之后的兄弟姐妹。“上一个同级”没有选择器。您需要使用javascript为此类节点应用样式

var divA=document.getElementById（'a'）；
divA.addEventListener（'mouseover'，function（）{
document.getElementById（'b'）。子项[0]。style.backgroundColor='green'；
});
#一个{
背景颜色：黄色；
}

这是b
这是一个
这是一个
您的最后一个div无效是，您可以。很高兴知道，没有Javascript是无法做到这一点的。谢谢@Rob是的，但它不能在OP的场景中使用，因为他的目标元素出现在他将要使用的选择器之前。但是，我没有使用“兄弟组合器”的经验，如果确实可能的话，请纠正我。
#a:hover  #one{
  background: white;
  -webkit-animation:spin 1s ease-in-out;
  -moz-animation:spin 1s ease-in-out;
  animation:spin 1s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 1s;
  opacity:1;    
  transition-delay:0s;
  }
  @-moz-keyframes spin { 100% { -moz-transform: rotate(180deg); } }
  @-webkit-keyframes spin { 100% { -webkit-transform: rotate(180deg); } }
  @keyframes spin { 100% { -webkit-transform: rotate(180deg); 
  transform:rotate(180deg); } }