Question

我决定围绕我找到的响应式菜单构建一个页面（我想在这里回答），当我准备好在页面的其余部分工作时，我意识到菜单的所有CSS都已设置为选择并为整个页面设置所有ul, li, a元素的样式。我尝试了多种方式为每个样式元素添加选择器，但每次出现问题都搞砸了。出于绝望，我为每个人制作了类/ ids，但这只会使得html看起来很粗糙，而且似乎我已经搞砸了某个地方。以下是令人讨厌的CSS。有人能指出我正确的方向吗？

CSS -

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;
    }

}

HTML -

<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>

Answer 1

在该菜单中专门为您要设置样式的所有内容添加.menuContainer。在此之前，请将您的ul / li设计为一般用途。

Answer 2

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

所以这里有一些你可以对你的代码做的事情：

您的班级“menuContainer”是您在对CSS进行特定更改之前必须使用的类，例如“.menuContainer ul”，“。menuutatainer a”等
在“menuContainer”中的每个范围内都有一个“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。

Answer 3

我不认为你通过增加很多课程搞砸了。你可以看看Denise Jacobs＆＃39;关于CSS Architecture的优秀系列，特别是关于OOCSS和SMACSS的部分。

如果采用OOCSS方法，您可以使用单个父类对模块进行范围调整，然后使用后代选择器来定位子元素和类（基本上是Vinc所建议的）。

在我看来，正确的方法实际上是添加更多的类 - 基本上只是对每个元素进行分类。这与SMACSS建筑学院更为一致。对于display: block和text-align: center等重复样式，创建可以在应用这些属性的任何元素上重用的实用程序类。

我同意臃肿的标记需要一些时间来习惯，但你可能会发现自由选择特异性更加一致。这是我个人采用的方法，我也喜欢CSS如何最终基本上记录模块的结构，而不实际将CSS与DOM结构耦合。

CSS Selector混淆 - 如何在不过度使用类的情况下控制样式？

3 个答案: