html - 无法仅针对 CSS 中的一个无序列表

标签 html css html-lists markup

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

这是我的简化标记:

<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 都显示为红色,并且也缺少列表样式。

最佳答案

nav ul, li 替换为 nav ul, nav li 并将 form ul, li 替换为 form ul, form li.

关于html - 无法仅针对 CSS 中的一个无序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27977681/

相关文章:

html - 响应式设计 : Elements with fixed size & fixed position relative to each other. 文字环绕

html - Bootstrap 和 Angular 未捕获的类型错误

javascript - CSS使用javascript动态放置元素而不相互影响

html - CSS - 两列列表间距

javascript - 水平溢出内容无滚动条拖放

javascript - 获取 Google map 上标记的坐标

php - 提交表单后尝试创建一个 php 自动电子邮件,并使用 HTML 设置电子邮件样式

javascript - 通过 jquery 检查具有相同类的下拉框中输入的重复值

css - 如何在 CSS 中创建彩色圆顶背景

html - 如何删除列表图像周围的水平空间?