在无序列表中选择一个特定类

时间:2014-03-11 04:09:42

标签: html css css-selectors

我是HTML / CSS的新手,我正在尝试在无序列表中选择一个特定类来进行样式化。

我希望能够在CSS中选择HTML代码:<li class="nav-header"><a href="#">WOMEN'S WEAR</a></li>

我尝试使用.dropdown-header:nth-child(2)选择代码,以便width110px更改为150px,但没有任何反应。

` 这是完整的代码:

HTML:

    <nav class="navigation">
      <ul>
        <li class="nav-header"><a href="#">MEN'S WEAR</a>
          <ul class="dropdown-background">
            <li class="dropdown-header"><a href="#">TOPWEAR</a>
               <ul>
                <li><a class="browse" href="#">Jackets & Coats</a></li>
                <li><a class="browse"  href="#">Shirts</a></li>
                <li><a class="browse"  href="#">Overshirts</a></li>
                <li><a class="browse"  href="#">T-Shirts</a></li>
                <li><a class="browse"  href="#">Basic T-Shirts</a></li>
                <li><a class="browse"  href="#">Knitwear</a></li>
                <li><a class="browse"  href="#">Sweats</a></li>            
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">BOTTOMWEAR</a>
              <ul>
                <li><a class="browse"  href="#">Jeans</a></li>
                <li><a class="browse"  href="#">Colour Jeans</a></li>
                <li><a class="browse"  href="#">Pants</a></li>
                <li><a class="browse"  href="#">Shorts</a></li>   
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">FOOTWEAR</a>
              <ul>
                <li><a class="browse"  href="#">Boots</a></li>
                <li><a class="browse"  href="#">Sandals</a></li>
                <li><a class="browse"  href="#">Shoes</a></li>
                <li><a class="browse"  href="#">Snickers</a></li>         
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">ACCESSORIES</a>
              <ul>
                <li><a class="browse"  href="#">Belts</a></li>
                <li><a class="browse"  href="#">Caps</a></li>
                <li><a class="browse"  href="#">Hats</a></li>
                <li><a class="browse"  href="#">Scarves</a></li>
                <li><a class="browse"  href="#">Gloves</a></li>
                <li><a class="browse"  href="#">Sunglasses</a></li>
                <li><a class="browse"  href="#">Watches</a></li>
                <li><a class="browse"  href="#">Jewelry</a></li>              
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">SALE</a>
              <ul>
                <li><a class="browse"  href="#">Jackets & Coats</a></li>
                <li><a class="browse"  href="#">Shirts</a></li>
                <li><a class="browse"  href="#">Overshirts</a></li>
                <li><a class="browse"  href="#">T-Shirts</a></li>
                <li><a class="browse"  href="#">Basic T-Shirts</a></li>
                <li><a class="browse"  href="#">Knitwear</a></li>
                <li><a class="browse"  href="#">Sweats</a></li>            
              </ul>
            </li>
          </ul>
        </li>
      </ul>

      <ul>
        <li class="nav-header"><a href="#">WOMEN'S WEAR</a>
          <ul class="dropdown-background">
            <li class="dropdown-header"><a href="#">TOPWEAR</a>
             <ul>
                <li><a class="browse" href="#">Jackets & Coats</a></li>
                <li><a class="browse"  href="#">Shirts</a></li>
                <li><a class="browse"  href="#">Overshirts</a></li>
                <li><a class="browse"  href="#">T-Shirts</a></li>
                <li><a class="browse"  href="#">Basic T-Shirts</a></li>
                <li><a class="browse"  href="#">Knitwear</a></li>
                <li><a class="browse"  href="#">Sweats</a></li>            
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">BOTTOMWEAR</a>
              <ul>
                <li><a class="browse"  href="#">Jeans</a></li>
                <li><a class="browse"  href="#">Colour Jeans</a></li>
                <li><a class="browse"  href="#">Pants</a></li>
                <li><a class="browse"  href="#">Shorts</a></li>   
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">FOOTWEAR</a>
              <ul>
                <li><a class="browse"  href="#">Boots</a></li>
                <li><a class="browse"  href="#">Sandals</a></li>
                <li><a class="browse"  href="#">Shoes</a></li>
                <li><a class="browse"  href="#">Snickers</a></li>         
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">ACCESSORIES</a>
              <ul>
                <li><a class="browse"  href="#">Belts</a></li>
                <li><a class="browse"  href="#">Caps</a></li>
                <li><a class="browse"  href="#">Hats</a></li>
                <li><a class="browse"  href="#">Scarves</a></li>
                <li><a class="browse"  href="#">Gloves</a></li>
                <li><a class="browse"  href="#">Sunglasses</a></li>
                <li><a class="browse"  href="#">Watches</a></li>
                <li><a class="browse"  href="#">Jewelry</a></li>              
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">SALE</a>
              <ul>
                <li><a class="browse"  href="#">Jackets & Coats</a></li>
                <li><a class="browse"  href="#">Shirts</a></li>
                <li><a class="browse"  href="#">Overshirts</a></li>
                <li><a class="browse"  href="#">T-Shirts</a></li>
                <li><a class="browse"  href="#">Basic T-Shirts</a></li>
                <li><a class="browse"  href="#">Knitwear</a></li>
                <li><a class="browse"  href="#">Sweats</a></li>            
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

CSS:

/* ------------------ NAVIGATION BAR ------------------ */
    .navigation {


      position: relative;
        background-color: #f5f5f5;
        width: 1024px;
        height: 42px;
        margin: 0 auto;
        border-bottom: 1px solid #ddd;

      -webkit-font-smoothing:antialiased;
    }

    .navigation a {
      -webkit-transition: all .25s ease;
          -moz-transition: all .25s ease;
           -ms-transition: all .25s ease;
            -o-transition: all .25s ease;
               transition: all .25s ease;
    }

    .nav-header:nth-child(1) { 
      width: 110px;
      height: 30px;
      float: left;
      padding-top: 13px;
      padding-left: 10px;
      list-style: none;
      position: relative;
      font-weight: bold;
        -webkit-transition: all .25s ease;
          -moz-transition: all .25s ease;
           -ms-transition: all .25s ease;
            -o-transition: all .25s ease;
               transition: all .25s ease;
     }


    .nav-header:hover {
      background: #000;
    }


    .nav-header ul {
      position: relative;
      overflow: hidden;
      visibility: hidden;
      top: 14px;
      opacity: 0;
      z-index: 1;
      -webkit-transition: all .25s ease;
         -moz-transition: all .25s ease;
          -ms-transition: all .25s ease;
           -o-transition: all .25s ease;
              transition: all .25s ease;  
    }

    .nav-header:hover ul {
      visibility: visible;
      opacity: 1;
    }
    .nav-header a {
      text-decoration: none;
      color: #000;
    }

    .nav-header:hover  a{
      color: #fff;

    }

    .dropdown-background {
      background: #000;
      width: 1024px;
      height: 265px;
      right: 10px;
    }

    .dropdown-header {
      position: relative;
      float: left;
      top: 10px;

    }

    .dropdown-header a {
      padding-right: 60px;
      color: #fff;
      padding-left: 10px;

    }

    .dropdown-header a:hover {
      text-decoration: underline;
    }

    .browse {
      font-weight: normal;
      font-size: 12px;
      line-height: 25px;
    }

    .browse:hover {
      text-decoration: underline;
    }

3 个答案:

答案 0 :(得分:2)

让我们应用这种伪元素样式。

nav ul:nth-of-type(2) > li.nav-header
{

  width:150px;
}

这样就可以了。这是一个工作演示。 http://jsbin.com/suxumefe/1/

答案 1 :(得分:1)

HTML

<!--in html code add id-->
<li class="nav-header" id="womans-wear"><a href="#">WOMEN'S WEAR</a>
<!--end html-->

CSS

#womans-wear{

    /*add your styles in here*/
    width:150px;

}

根据上述评论

中的解释,这样的事情

答案 2 :(得分:0)

以下内容可行:

.navigation ul:nth-of-type(2) > .nav-header a {
  width: 150px;
}

虽然应该注意,如果您可以将类添加到您要定位的第二个ul,请添加它以使您的样式适用于do not support nth-of-type的浏览器。此外,由于创建过于具体且难以覆盖的选择器,many CSS authorities不首选使用ID而不是类。