Html 悬停语法之间的区别

这两种不同的悬停选择器语法之间有什么区别

#id:hover p 
#id p:hover

#id:hover p

-将鼠标悬停在父

#id

元素上时，将选择子

p

元素

#id p:hover

-将选择一个子元素

p

悬停在其上方时（一个

#id

元素的子元素）

以此为例:

。示例1：悬停p，
.示例2 p:悬停{
颜色：红色；
}
div{
边框：1px实心；
}
p组{
边框：1px实心#f00；
}

.示例1：悬停p

将鼠标悬停在父元素上时，将设置p元素的样式

.示例2 p:悬停

将鼠标悬停在p元素上时，p元素将被设置样式

id:hover p

将在

id

悬停时选择元素

id

内的

p

元素

id p:hover

将在

p

悬停时选择元素

id

内的

p

元素

---

通常，结果是相同的，但并非如此，悬停的元素之间存在差异。

两者都选择

p

元素，该元素是具有

id='id'

的元素的子元素或后代，但差异在于何时被选中以及被选中的元素数量

• #id:hover p

  -当带有

  id='id'

  的元素悬停在上方时（父元素或祖父母悬停在上方），将选中

  p

  。这将选择所有后代

  p

  标记

• #id p:hover

  -当

  p

  本身处于悬停状态时（而不是父母或祖父母），将选中

  p

  。这将仅选择悬停在

  上的
  p

正如您在下面的代码片段中所看到的，将鼠标悬停在

p

标记本身（文本子段落或子段落）上，将仅将

颜色的
更改为
米色
，而将鼠标悬停在其他部分（父部分）上将所有后代
p
的
背景更改为
红色

您还会注意到，将鼠标悬停在
p
标记上也会导致其
背景变为红色。这是因为当
p
处于悬停状态时，父母/祖父母也会隐式地处于悬停状态


#id:hover p{
背景：红色；
}
#id p：悬停{
颜色：米色；
}

一些内容
儿童段落

儿童段落

一些内容（祖父母）
某些内容（父级）
后代段

后代段

你用谷歌搜索过你的问题吗？