Html CSS选择器混乱-如何在不过度使用类的情况下控制样式？

我决定围绕我找到的一个响应菜单构建一个页面（我想在这里有一个答案），当我准备好处理页面的其余部分时，我意识到菜单的所有CSS都已设置为选择整个页面的所有

ul，li，a

元素并设置其样式。我试着以多种方式向每个样式化元素添加选择器，但每次都会出现混乱。出于绝望，我为每一个都创建了类/ID，但这只会让html看起来很恶心，而且似乎我还是把某个地方搞砸了。下面是令人不快的css。 有人能给我指出正确的方向吗

CSS-

HTML-

显示菜单

将

.menuContainer

添加到您希望在该菜单中特别设置样式的所有内容前面。在这之前，将你的ul/li设计成通用的。

为了不打乱你正在进行的编码，你必须“包装”你的元素，特别是你易受攻击的标签（li、ul、a等，因为你会多次使用它们），所以你在里面做的任何更改都只会影响你“父亲”元素的“孩子”

下面是您可以对给定代码执行的一些操作：

您的类“menuContainer”是在您对css进行特定更改之前必须使用的类，如“.menuContainer ul”、“.menuContainer a”等

在“menuContainer”中的每个span中都有一个类“uppercasebold”，因此使用“.menuContainer span{}”可以删除所有“uppercasebold”类

您需要尽可能减少编码中的冲突，因此明智地使用“.menuContainer li”不仅会影响“.menuContainer ul li”，还会影响“.menuContainer ul li ul li”，与其他标记如“.menuContainer li a”一样

要只影响你的内心（第二个）li，你可以给它一个类或id，或者你可以调用“.menucontainer ul li ul li”，但要影响你的第一个li，你必须给它一个类或id

---

我不认为你因为增加了很多课程而搞砸了。您可以在上查看Denise Jacobs的优秀系列，特别是OOCSS和SMACS部分

如果您采用OOCSS方法，您将使用一个父类来确定模块的范围，然后使用后代选择器以子元素和类为目标（基本上就是Vinc所建议的）

在我看来，正确的方法实际上是添加更多的类——基本上只是对每个元素进行分类。这与SMACSS建筑学院更为一致。对于重复的样式，如

display:block

和

text align:center

，创建可以在应用这些属性的任何元素上重用的实用程序类

---

我同意，臃肿的标记需要一些时间来适应，但您可能会在选择器专用性的一致性方面找到自由。这是我个人采用的方法，我也喜欢CSS如何基本上记录模块的结构，而不实际将CSS与DOM结构耦合。

这让我非常接近，但我已经看了太久了，肯定缺少一个。一切都很好，直到它缩小到更小的屏幕断点。如果问得不多，你能看一下

span

上的这一点吗？我想我不会完全理解你的其余部分。

body {
    margin:0

}
html, body {
    height: 100%;
}

.menuBackground {
    background:#2f3036;
    width:100%;
    height:50px;
}

.menuContainer {
    text-align: center;
    position: relative;
}

/*Strip the ul of padding and list styling*/
ul {
    list-style-type:none;
    margin:0;
    padding:0;
}


/*Create a horizontal list with spacing*/
li {
    display:inline-block;
    vertical-align: top;
    margin-right:1px;
}

/*Style for menu links*/
li a {
    display:block;
    min-width:140px;
    height:50px;
    text-align:center;
    line-height:50px;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#fff;
    background:#2f3036;
    text-decoration:none;
    font-size: 1rem;
}

/*Hover state for top level links*/
li:hover a {
    background:#146ac3;
}

/*Style for dropdown links*/
li:hover ul a {
    background:#FFF;
    color:#2f3036;
    height:40px;
    line-height:40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
    background:#146ac3;
    color:#fff;
}

/*Hide dropdown links until they are needed*/
li ul {
    position: absolute;
    display:none;
}

/*Make dropdown links vertical*/
li ul li {
    display:block;
}

/*Prevent text wrapping*/
li ul li a {
    width:auto;
    min-width:100px;
    padding:0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden,.hidden:hover {
    display:block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-decoration:none;
    color:#fff;
    background:#146ac3;
    text-align:center;
    padding:16px 0;
    display:none;
    width:100%!important
}

/*Hide checkbox*/
input[type=checkbox] {
    display:none
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
    display:block;
    margin:0 auto;
}

/*Responsive Styles*/
@media screen and (max-width : 760px) {
    /*Make dropdown links appear inline*/
    ul {
        position:static;
        display:none;
        white-space: initial;
    }

    /*Create vertical spacing*/
    li {
        margin-bottom:0px;
        border-bottom: 1px solid #F3F3F3;
    }

    /*Make all menu links full width*/
    ul li,li a {
        width:100%;
    }

    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }

}

<div class="menuContainer">
            <label for="show-menu" class="show-menu"><span class="uppercasebold">Show Menu</span></label>
            <input type="checkbox" id="show-menu" role="button">
            <ul id="menu">
                <li><a href="#"><span class="uppercasebold">Home</span></a></li>
                <li>
                    <a href="#"><span class="uppercasebold">About</span></a>
                </li>
                <li>
                    <a href="#"><span class="uppercasebold">Inventory</span> ￬</a>
                    <ul class="hidden">
                        <li><a href="#">New</a></li>
                        <li><a href="#">Used</a></li>
                        <li><a href="#">Custom Built</a></li>
                    </ul>
                </li>
                <li><a href="#"><span class="uppercasebold">Forum</span></a></li>
                <li><a href="#"><span class="uppercasebold">Contact</span></a></li>
            </ul>
        </div>