如何在嵌套列表样式中分隔样式？

Question

我有一个列表,列表中也有列表.
我在父列表上设置样式但是我想要父母和子列表的不同样式但是它们混合在一起我不能分开它们.

HTML文件:

<ul id="accountNavigation">
  <li><a href="#">Something</a></li>                    
  <li id="userNavigation">
    <img src="https://si0.twimg.com/profile_images/135460415/UAB_dragon_head_normal.png" alt=""/>
    <a href="#">Username</a>
    <div class="showme">
      <ul id="userNavigationSubMenu">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>

      </ul>
    </div>
  </li>
</ul>

CSS文件:

body{background:#ff0000;}
#accountNavigation{ list-style: none;float: right;height: 44px;}
#accountNavigation li{ float: left;color: #fff;height: 44px;}
#accountNavigation li:hover{ background: #ddd;cursor: pointer;}
#accountNavigation li a{ text-decoration: none;color: #fff;line-height: 44px;font-weight: bold;font-size: 13px;height: 44px;padding: 15px 27px 0 14px;outline: none;}
#accountNavigation li img{ position: absolute;top: 12px;left: 10px;width: 22px;height: 22px;}
#userNavigation{position: relative;}
#userNavigation a {padding-left: 38px !important;}

#userNavigation{}
#userNavigation:hover{}
#userNavigation:hover .showme{display: inline;}
.showme
{
  display: none;
  width: 140px;
  height: 200px;
  background: #f5f5f5;
  margin: 0px auto;
  padding: 10px 5px 0px 5px;
  border: 1px solid #ddd;
  border-top: none;
  z-index: 10;
  position: absolute;
  right:0;
  top: auto;

}
#userNavigation ul { list-style: none;}

这是小提琴.

Answer 1

只需使用>直接/直接后代组合子,并id指定您要定位的li(或ul)元素:

#accountNavigation { /* outer ul element */
}

#accountNavigation > li { /* outer ul element's children li */
}

#accountNavigation > li > ul { /* first 'inner' ul element */
}

#accountNavigation > li > ul > li { /* first 'inner' ul element's li children */
}

当然,您可以更通用,只需使用:

ul { /* targets all ul elements */
    /* general styles */
}
ul li { /* targets all li elements within a ul */
    /* general styles */
}
ul li ul { /* targets all ul elements within an li element, itself within a ul */
    /* overrule general 'outer' styles */
}
ul li ul li { /* targets all li elements within a ul element,
                 within an li element, itself within a ul...and so on */
    /* overrule general 'outer' styles */
}

使用一般方法:

<ul>
    <li>This should be green!</li>
    <li>This is also green...
        <ul>
            <li>But this is not, it's, um...blue!</li>
            <li>And so on...</li>
        </ul></li>
    <li>This is green too, just because.</li>
</ul>

以下CSS应证明其用途:

ul li {
    color: green; /* the 'general'/'default' settings */
    margin-left: 10%;
}

ul li ul li {
    color: blue; /* this overrides the 'general' color setting */
                 /* the margin is not overridden however */
}?

JS小提琴演示.

参考文献:

• CSS选择器(3级),在W3.org.

Answer 2

这里给出的解决方案可以工作，但是打字太多。由于选择器在CSS3中的工作方式，它可以被简化，\xe2\x80\xa6

\n

/* list styles */\n\n/* ordered lists */\nol { list-style-type: decimal;}\nol ol { list-style-type: upper-alpha;}\nol ol ol {list-style-type: upper-roman;}\nol ol ol ol {list-style-type: lower-alpha;}\nol ol ol ol ol {list-style-type: lower-roman;}\nol ol ol ol ol ol {list-style-type: lower-greek;}\n\n\n/* set colours here */\nol li { color: darkblue; }\nol ol li { color: orange; }\nol ol ol li { color: darkgoldenrod; }\nol ol ol ol li { color: green; }\nol ol ol ol ol li { color: blue; }\nol ol ol ol ol ol li  { color: indigo; }\n\n\n\n/* unordered lists */\nul { list-style: disc outside ;}\nul ul { list-style: square outside ;}\nul ul ul {list-style: circle outside ;}\nul ul ul ul {list-style: disc outside ;}\nul ul ul ul ul {list-style: square outside ;}\nul ul ul ul ul ul {list-style: circle outside ;}\n\n\n/* set colours here */\nul li { color: darkblue; }\nul ul li { color: orange; }\nul ul ul li { color: darkgoldenrod; }\nul ul ul ul li { color: green; }\nul ul ul ul ul li { color: blue; }\nul ul ul ul ul ul li { color: indigo; }\n\n\n

\n

在 \xe2\x80\x9col\xe2\x80\x9ds \xe2\x80\x94 之间抛出 \xe2\x80\x9cli\xe2\x80\x9ds 是多余的，反之亦然\xe2\x80\x94 是多余的，可以省略。

\n

此外，由于列表项将继承有序/无序列表的属性，因此第二组可以使用 \xe2\x80\x9cul\xe2\x80\x9d 轻松完成。

\n

/* unordered lists */\nul { \n   list-style-type: circle;\n   color: red;\n   }\nul ul { \n   list-style-type: disc;\n   color: orange;\n   }\nul ul ul {\n   list-style-type: square;\n   color: darkgoldenrod;\n   }\n

\n

这是一个通用答案（因为这个问题很老了，我推测具体用例已经解决）。

\n

勘误表：关于颜色值存在错误。已更正。

\n

Answer 3

您是否尝试过 CSS 子选择器？

ul { /* parent list styles here */ }
ul > li > ul { /* child list styles here */ }