css - 悬停div的直接子元素样式(仅CSS)

LIVE DEMO

悬停时，我想对p的div [class*="high-"]子级应用样式（任何以high-开头的div），但不是所有的p子级，只有悬浮的父级中的一个。如果不需要jQuery，则更好。

HTML：

    <div class="high-venas">
      <p><strong>Venas y varices</strong><br>
         <span>Lorem ipsum dolor sit amet</span></p>
   </div>

    <div class="high-cirugiaCalvicie">
      <p><strong>Cirujía calvicie</strong><br>
         <span>Lorem ipsum dolor sit amet nonummy nibh </span></p>
   </div>

CSS：

#highlights p {
    background-color: white;
    opacity:0.7;
}

由于我在这里尝试了这些示例，但没有结果，我认为这可能是由选择器引起的，当鼠标悬停以“ high-”开头的div时，可能无法识别：

div [class*="high-"]:hover > div > p {
    opacity:1;
}

[class*="high-"]:hover > div > p {
    opacity:1;
}

最佳答案

不要在div和属性选择器[something]之间设置空格。另外，“ high-”和p之间没有中间div，因此请将其删除。而是这样的：

div[class*="high-"]:hover > p {
    opacity:1;
}

CSS选择器上的空白表示后代，因此您在div内寻找具有属性的元素...

编辑

由于选择器的特殊性，在提供的小提琴中您还有另一个问题。 ID选择器的优先级高于属性选择器，因此，第一个p选择器（受ID选择器#highlights p {的影响）优先于:hover。要解决此问题，也可以在悬停规则上使用id选择器：

Updated JsFiddle

#highlights div[class*="high-"]:hover > p {

}

关于css - 悬停div的直接子元素样式(仅CSS)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26164900/