悬停 div 的直接子样式（仅 CSS）答案

【问题标题】：Hover div's direct children style (only CSS)悬停 div 的直接子样式（仅 CSS）
【发布时间】：2014-11-27 16:23:18
【问题描述】：

我想在悬停时将样式应用于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;
}

【问题讨论】：

你试过了吗？ div[class*="high-"]:hover p {不透明度:1; }
你的两个选择器都错了——在第一个选择器中，元素和属性选择器之间有一个空格（这样就可以在 child 元素上查找具有该类的元素的 div)，而您的第二个尝试首先在具有该类的元素下方找到一个 div，而您的实际元素结构中没有。
在帖子中添加了现场演示

标签： css

【解决方案1】：

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

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

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

编辑

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

Updated JsFiddle

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

}

【讨论】：

谢谢，但这些更改并不能解决问题.. 没有任何反应。我会做一个 jsFiddle 来尝试重现问题
@Biomehanika，使用 SO 的代码 sn-p... (Ctrl + M)
非常感谢。我会在 1 分钟内打勾。

【解决方案2】：

css 代码不起作用，因为 p 标签不在另一个 div 中。

使用：

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

仅突出显示悬停的 high-* 元素中的 p 元素。

【讨论】：

是的，我好像有红色的东西不同，我的坏...更正