Question

我希望在悬停（任何div以高 - 开头），但不是所有p个孩子时，div [class*="high-"] 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;
}

由于我在这里尝试了这些例子没有结果，我认为这可能是由选择器引起的，也许当鼠标悬停以＆＃34开头的div时它可能无法识别;高 - ＆＃34;：

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

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

Answer 1

请勿在{{1}}和属性选择器div之间设置空格。此外，＆＃34; high - ＆＃34;之间没有中间div。一个和[something]，所以删除它。它会是这样的，而不是：

CSS选择器上的空格意味着 descendand ，因此您在div中寻找具有该属性的元素...

修改

由于选择器的特异性，在提供的小提琴中你有另一个问题。 ID选择器优先于属性选择器，因此您的第一个div[class*="high-"]:hover > p { opacity:1; }选择器（因为它受到ID选择器p的优先级高于#highlights p {选择器。要修复它，也可以使用悬停规则上的id选择器：

Updated JsFiddle

:hover

Answer 2

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

使用：

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

只显示悬停的high- *元素中的p元素。

Hover div的直接儿童风格（仅限CSS）

2 个答案: