如何在<p>中包含</p> <div>中的<p>中的文本

Question

当用户使用鼠标悬停时，如何为<p>中包含<div>中的文字着色。

假设我有这个HTML代码：

<div id="riga_ristorante_1" >
<div>
  <p>HI</p>
</div>
<div><p>HOME</p></div>
<div><p>DOG</p></div>
</div>

我想要颜色＆＃34; hi＆＃34;，＆＃34; HOME＆＃34;，＆＃34; DOG＆＃34;当用户进入<p>元素时，黑色，所以我使用CSS：

#riga_ristorante_1:hover > p {
     text-align: center;
     color: black;

}

但它不起作用。有人可以帮帮我吗？

Answer 1

您使用的是child combinator（大于号码>），但是您的选择器匹配的ID为div的祖父母，而不是父节点。

使用descendant combinator（空格：）代替。

Answer 2

您的ID ID后面直接定位该段落，在您的html中，您没有段落标记，该段落标记是您riga_ristorante_1的直接子项

了解>选择器

的更多信息

https://developer.mozilla.org/en/docs/Web/CSS/Child_selectors

使用您提供的HTML，您可以

#riga_ristorante_1:hover p { ... }

或

#riga_ristorante_1:hover div > p { ... }

或

#riga_ristorante_1 div:hover > p { ... }

甚至

#riga_ristorante_1 p:hover { ... }

Answer 3

css选择器将为riga_ristorante_1:hover > div > p {}

＆＃13;

＆＃13;

#riga_ristorante_1:hover > div > p {
     text-align: center;
     color: blue;

}

＆＃13;

<div id="riga_ristorante_1" >
<div>
  <p>HI</p>
</div>
<div><p>HOME</p></div>
<div><p>DOG</p></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您已将p作为第二级，因此您无法使用>，因为它仅适用于第一级。使用

#riga_ristorante_1:hover p {
     color: red;
}

＆＃13;

＆＃13;

#riga_ristorante_1:hover p {
     color: red;

}

＆＃13;

<div id="riga_ristorante_1" >
<div>
  <p>HI</p>
</div>
<div><p>HOME</p></div>
<div><p>DOG</p></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

尝试使用#riga_ristorante_1 p:hover，只需提供toggle效果

＆＃13;

＆＃13;

#riga_ristorante_1  p:hover {
     text-align: center;
     color: blue;

}

＆＃13;

<div id="riga_ristorante_1" >
<div>
  <p>HI</p>
</div>
<div><p>HOME</p></div>
<div><p>DOG</p></div>
</div>

＆＃13;

＆＃13;

＆＃13;