Html 如何在鼠标悬停时更改嵌套列表中各个列表项的背景色（并更改为全菜单宽度） #菜单{宽度：50%；} .high{背景：#0F0；} .列表项：悬停{background:#000；} /*非基本风格*/ .列表项a{文本装饰：无；} .列表项：悬停a{color:#FFF；}_Html_Css

Html 如何在鼠标悬停时更改嵌套列表中各个列表项的背景色（并更改为全菜单宽度） #菜单{宽度：50%；} .high{背景：#0F0；} .列表项：悬停{background:#000；} /*非基本风格*/ .列表项a{文本装饰：无；} .列表项：悬停a{color:#FFF；}

html css

Html 如何在鼠标悬停时更改嵌套列表中各个列表项的背景色（并更改为全菜单宽度） #菜单{宽度：50%；} .high{背景：#0F0；} .列表项：悬停{background:#000；} /*非基本风格*/ .列表项a{文本装饰：无；} .列表项：悬停a{color:#FFF；},html,css,Html,Css,结构： P0 __C0-P0 __C1-P0 P1 __C0-P1 __C1-P1 目前我无法单独选择和更改子项的背景（悬停时）。但是，如果我尝试使用first child选择器，我可以单独选择每个列表项。但是- 然后，父菜单的选择仅限于锚定宽度，而不限于整个菜单宽度下面是您的问题并不清楚，但在：hover和元素之间不应该有空格它应该是。列表项：悬停{…}不是。列表项：悬停{…}更改此行： <!DOCTYPE html> <html xmlns="http://www.w

结构：
P0
__C0-P0
__C1-P0
P1
__C0-P1
__C1-P1

目前我无法单独选择和更改子项的背景（悬停时）。
但是，如果我尝试使用

first child

选择器，我可以单独选择每个列表项。但是-
然后，父菜单的选择仅限于锚定宽度，而不限于整个菜单宽度

下面是

您的问题并不清楚，但在

：hover

和元素之间不应该有空格

它应该是

。列表项：悬停{…}

不是

。列表项：悬停{…}

更改此行：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type='text/css'  media='all'>
        #menu {width: 50%;}
        .high {background: #0F0;}
        .list-item :hover {background: #000;}

        /* non essential styles */
        .list-item a{text-decoration: none;}
        .list-item :hover a{color: #FFF;}
    </style>
</head>
<body>
    <div id="menu" >
        <ul>
            <li class="list-item">
                <div class="level-0 high" id="P0">
                    <a href="#">P0</a>
                </div>
                <ul>
                    <li class="list-item">
                        <div class="level-1" id="C0-P0">
                            <a href="#">C0-P0</a>
                        </div>
                    </li>
                    <li class="list-item">
                        <div class="level-1" id="C1-P0">
                            <a href="#">C1-P0</a>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <div class="level-0" id="P1">
                    <a href="#">P1</a>
                </div>
                <ul>
                    <li class="list-item">
                        <div class="level-1" id="C0-P1">
                            <a href="#">C0-P1</a>
                        </div>
                    </li>
                    <li class="list-item">
                        <div class="level-1" id="C1-P1">
                            <a href="#">C1-P1</a>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>

为此：

.list-item :hover {background: #000;}

这是…

这是一个jsfiddle，但是，我仍然不明白你在问什么。试试

。列表项div:hover

谢谢-我已经试过了，但是在

div

之后留下了一个空格@Yoshi请将其放在回答中以便关闭。现在，

P0

P1

无法选择。

li .list-item :hover {background: #000;}