css - 冗余选择器使折叠菜单不起作用

Question

我一直在研究 HTML、CSS 和 jQuery，但我有时会搞砸的事情之一是选择器，在这种情况下我必须有多余的选择器。

我想在折叠 li 之后修改 ul 和 li，但是选择器不起作用。

• 我该如何解决这个问题？我认为其他选择器应该被 .colapsed 覆盖，不是吗？

http://jsfiddle.net/jcml/bby7522h/

<div class="menu m1 corner">
        <div class="links">
            <ul>
                <li class="toSub colapsed" data-open=".m3">Architecture
                <ul>
                    <li class="toSlide" data-open=".s1">bla</li>
                    <li class="toSlide" data-open=".s2">bla</li>
                    <li class="toSlide" data-open=".s3">bla</li>
                    <li class="toSlide" data-open=".s4">blablablablablabla</li>
                </ul></li>
                <li class="toSub" data-open=".m4">Coding</li>
                <li class="toSlide" data-open=".s5">bla</li>
                <li class="toSlide" data-open=".s6">bla</li>
                <li class="toSlide" data-open=".s7">bla</li>
                <li class="toSlide" data-open=".s8">blablablablablabla</li>
                <li class="toSub" data-open=".m5">Thesis</li>
                <li class="toSlide" data-open=".s9">bla</li>
                <li class="toSlide" data-open=".s10">blablablablablabla</li>
            </ul>
        </div>
    </div>

ul {
    padding: 0;
    margin: 0;
}

.menu > .links {
    font-family: 'Montserrat', sans-serif;
    font-size: 2em;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    height: 100%;
}


.links ul {
    position: relative;
}

.menu li {
    list-style: none;
    display: table;
    position: relative;
    left: 50%;
    padding: 15px;
    margin: 5px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
 }

.menu li, a{
    cursor: pointer;
    color: rgba(255,255,255,.75);
    -webkit-transition: all ease .75s;
    -moz-transition: all ease .75s;
    -ms-transition: all ease .75s;
    -o-transition: all ease .75s;
    transition: all ease .75s;
    text-decoration: none;
}

.menu li:hover, .menu a:hover {
    color: rgba(255,255,255,1);
}

.colapsed .ul .li {
    color: black;
    font-size: .1em;
    padding: 0px;
    margin: 0px;
}

Answer 1

您的选择器有误:

.colapsed .ul .li {

应该是:

.colapsed ul li {