无法仅定位 CSS 中的一个无序列表

Question

我试图在我的页面上设置不同的两个无序列表样式 - 顶部导航栏没有列表样式，表单中有常规列表样式。

这是我的简化标记：

<html>
<head>
    <style>
        nav
        {
            background-color:lightgrey;
        }
        nav ul, li
        {
            list-style:none;
            display:inline-block;
        }
        form ul, li
        {
            color:red;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>Nav Item 1</li>
            <li>Nav Item 2</li>
            <li>Nav Item 3</li>
        </ul>
    </nav>
    <form>
        <ul>
            <li>Form Item 1</li>
            <li>Form Item 2</li>
            <li>Form Item 3</li>
        </ul>
    </form>
</body>

当这是运行时，导航和表单 UL 都是红色的并且也没有列表样式。

Answer 1

将 nav ul, li 替换为 nav ul, nav li，将 form ul, li 替换为 form ul, form li。

Answer 2

您的代码应如下所示：

<html>
<head>
    <style>
        nav
        {
            background-color:lightgrey;
        }
        nav ul, li
        {
            list-style:none;
            display:inline-block;
        }
        /*Targets all "li" elements that have "form" as parent*/
        form ul, form ul li
        {
            color:red;
        }          
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>Nav Item 1</li>
            <li>Nav Item 2</li>
            <li>Nav Item 3</li>
        </ul>
    </nav>
    <form>
        <ul>
            <li>Form Item 1</li>
            <li>Form Item 2</li>
            <li>Form Item 3</li>
        </ul>
    </form>
</body>

无法仅定位 CSS 中的一个无序列表

Unable to target just one unordered list in CSS

html

css

html-lists

markup