如何分隔嵌套列表样式中的样式？ [英] How to separate styles in a nested list styling?

问题描述

我有一个列表和列表也有它的列表。

我在父列表上设置样式，但是我想为父列表设置不同的样式，但它们混合在一起，我不能将它们分开。

HTML档案：

 < ul id =accountNavigation > 
< li>< a href =＃>某事< / a>< / li> 
< li id =userNavigation> 
< img src =https://si0.twimg.com/profile_images/135460415/UAB_dragon_head_normal.pngalt =/> 
< a href =＃>使用者名称< / a> 
< div class =showme> 
< ul id =userNavigationSubMenu> 
< li>测试< / li> 
< li>测试< / li> 
< li>测试< / li> 
< li>测试< / li> 
< li>测试< / li> 
< li>测试< / li> 
< li>测试< / li> 
 
< / ul> 
< / div> 
< / li> 
< / ul> 
  

CSS文件：

 
 #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; 
背景：＃f5f5f5; 
 margin：0px auto; 
 padding：10px 5px 0px 5px; 
 border：1px solid #ddd; 
 border-top：none; 
 z-index：10; 
位置：绝对; 
 right：0; 
 top：auto; 
 
 
 #userNavigation ul {list-style：none;} 
  

这是小提琴。

解决方案

只需使用> 直接/立即后代组合器，并使用 id 指定您要定向的元素 li （或 ul ）元素：

  #accountNavigation {/ *外部ul元素* / 
} 
 
 #accountNavigation> li {/ *外部ul元素的子元素li * / 
} 
 
 #accountNavigation> li> ul {/ *第一个'内部'ul元素* / 
} 
 
 #accountNavigation> li> ul> li {/ * first'inner'ul元素的li子* / 
} 
  

你可以当然，应该更通用并且简单地使用：

$ ul $ {/ *目标所有ul元素* /
/ *一般样式* /
}
ul li {/ *针对ul中的所有li元素* /
/ *常规样式* /
}
ul li ul {/ *定位一个li元素中的所有ul元素，它本身在一个ul * /
/ *中，覆盖一般的'outer'样式* /
}
ul li ul li {/ *全部定位li元素中的元素，li元素中的
，本身在ul中，等等* /
/ *推翻一般'外部'风格* /
}

使用一般方法：

 < UL> 
< li>这应该是绿色的！< / li> 
< li>这也是绿色的... 
< ul> 
< li>但这并非如此，这是......蓝色！< / li> 
< li>等等...< / li> 
< / ul>< / li> 
< li>这也是绿色的，仅仅是因为。< / li> 
< / ul> 
  

下面的CSS应该演示它的用法：

  ul li {
 color：green; / *'一般'/'默认'设置* / 
余量：10％; 
} 
 
 ul li li li {
 color：blue; / *这将覆盖常规颜色设置* / 
 / *保证金不会被覆盖，但* / 
} 
  

JS Fiddle演示。

参考文献：

• CSS选择器（3级），在W3.org 。

I have a list and list also has list in it.
I set styles on parent list but I want different styles for parent and child list but they are mixed somehow I can't separate them.

HTML file:

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

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

This is fiddle.

解决方案

Simply use the > direct/immediate descendant combinator, and an id to specify which li (or ul) elements you're targeting:

#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 */
}

You can, of course, be more generic and simply use:

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 */
}

Using the general approach:

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

The following CSS should demonstrate its use:

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 Fiddle demo.

References:

• CSS Selectors (Level 3), at the W3.org.

这篇关于如何分隔嵌套列表样式中的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！