css - Hover div 的直接子样式(仅限 CSS)

Question

LIVE DEMO

我想在悬停时将样式应用于 div [class*="high-"] 的 p 子级(任何以 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;
}

Answer 1

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

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

CSS 选择器上的空格表示 descendand，因此您要在 div 中寻找具有属性的元素...

编辑

在提供的 fiddle 中，由于选择器的特殊性，您还有另一个问题。 Id 选择器优先于属性选择器，所以你的第一个 p 选择器，因为它受制于 id 选择器 #highlights p { 优先于 :hover 一个。要修复它，也可以在悬停规则上使用 id 选择器:

Updated JsFiddle

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

}