从css中选择Ul和LI

时间：2016-12-16 10:25:25

标签： javascript jquery html css .net

如何从css中的嵌套ul li中仅选择“关于我们”？

<!DOCTYPE HTML>
<html dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, user-scalable=yes">
<title>site map</title>
</head>
<body>
<a href="#">Home Page</a>
<div class="main-sitemap">
   <ul class="sitemap">
       <li><a href="#">About us</a></li>
       <li><a href="#">success stories</a></li>
       <li><a href="#">giving back</a></li>
       <li><a href="#">tours</a></li>
       <li><a href="#">contact</a></li>
       <li><a href="#">membership
           <ul>
               <li><a href="#">dining discout deals</a></li>
               <li><a href="#">dreamtrips</a></li>
               <li><a href="#">travel deals discounts</a></li>
           </ul>
       </a></li>
       <li><a href="#">opportunity
           <ul>
               <li><a href="#">work at home oportunuty</a></li>
           </ul>
       </a></li> 
       <li><a href="#">careers
           <ul>
               <li><a href="#">our company</a></li>
               <li><a href="#">out culture</a></li>
               <li><a href="#">our brands</a></li>
           </ul>
       </a></li>
       <li class="blog-sitemap"><a href="#">Blog
           <ul>
               <li>
               <a href="/" class="blog-sitemap-sub" onclick="return false;">categories
                   <ul>
                       <li><a href="#">Chnaging lives</a></li>
                       <li><a href="#">experience more</a></li>
                   </ul>
               </a>
               </li>

           </ul>
            <ul>
               <li>
               <a href="/" class="blog-sitemap-sub" onclick="return false;">categories
                   <ul>
                       <li><a href="#">Chnaging lives</a></li>
                       <li><a href="#">experience more</a></li>
                   </ul>
               </a>
               </li>

           </ul>

       </a></li>
   </ul>
   </div>
</body>
<style>
.sitemap li a {
   text-transform: capitalize;
}
.sitemap .blog-sitemap-sub{
   text-decoration: none;
   color: #000;
   cursor: default;
}
</style>
</html>

4 个答案:

答案 0 :(得分：3)

您可以使用:first-child伪类选择器来获取集合中的第一个子节点，并使用direct child(>) selector您可以获得有助于避免嵌套子节点的直接子节点。

.sitemap > li:first-child > a{
   /* define style properties */
}


.sitemap > li:first-child > a {
  color: red;
}
<div class="main-sitemap">
  <ul class="sitemap">
    <li><a href="#">About us</a>
    </li>
    <li><a href="#">success stories</a>
    </li>
    <li><a href="#">giving back</a>
    </li>
    <li><a href="#">tours</a>
    </li>
    <li><a href="#">contact</a>
    </li>
    <li><a href="#">membership
           <ul>
               <li><a href="#">dining discout deals</a>
    </li>
    <li><a href="#">dreamtrips</a>
    </li>
    <li><a href="#">travel deals discounts</a>
    </li>
  </ul>
  </a>
  </li>
  <li><a href="#">opportunity
           <ul>
               <li><a href="#">work at home oportunuty</a>
  </li>
  </ul>
  </a>
  </li>
  <li><a href="#">careers
           <ul>
               <li><a href="#">our company</a>
  </li>
  <li><a href="#">out culture</a>
  </li>
  <li><a href="#">our brands</a>
  </li>
  </ul>
  </a>
  </li>
  <li class="blog-sitemap"><a href="#">Blog
           <ul>
               <li>
               <a href="/" class="blog-sitemap-sub" onclick="return false;">categories
                   <ul>
                       <li><a href="#">Chnaging lives</a>
  </li>
  <li><a href="#">experience more</a>
  </li>
  </ul>
  </a>
  </li>

  </ul>
  <ul>
    <li>
      <a href="/" class="blog-sitemap-sub" onclick="return false;">categories
                   <ul>
                       <li><a href="#">Chnaging lives</a>
    </li>
    <li><a href="#">experience more</a>
    </li>
  </ul>
  </a>
  </li>

  </ul>

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

答案 1 :(得分：0)

＆＃13;
＆＃13; 
<ul class="sitemap">
  <li><a href="#">About us</a>
  </li>
  <li><a href="#">success stories</a>
  </li>
  <li><a href="#">giving back</a>
  </li>
  <li><a href="#">tours</a>
  </li>
  <li><a href="#">contact</a>
  </li>
  <li><a href="#">membership
           <ul>
               <li><a href="#">dining discout deals</a>
  </li>
  <li><a href="#">dreamtrips</a>
  </li>
  <li><a href="#">travel deals discounts</a>
  </li>
</ul>
</a>
</li>
<li><a href="#">opportunity
           <ul>
               <li><a href="#">work at home oportunuty</a>
</li>
</ul>
</a>
</li>
<li><a href="#">careers
           <ul>
               <li><a href="#">our company</a>
</li>
<li><a href="#">out culture</a>
</li>
<li><a href="#">our brands</a>
</li>
</ul>
</a>
</li>
<li class="blog-sitemap"><a href="#">Blog
           <ul>
               <li>
               <a href="/" class="blog-sitemap-sub" onclick="return false;">categories
                   <ul>
                       <li><a href="#">Chnaging lives</a>
</li>
<li><a href="#">experience more</a>
</li>
</ul>
</a>
</li>

</ul>
<ul>
  <li>
    <a href="/" class="blog-sitemap-sub" onclick="return false;">categories
                   <ul>
                       <li><a href="#">Chnaging lives</a>
  </li>
  <li><a href="#">experience more</a>
  </li>
</ul>
</a>
</li>

</ul>

</a>
</li>
</ul>
＆＃13; 
ul li:nth-child(1)
＆＃13;
＆＃13;
＆＃13;

使用Please enter username: net user %username% /Domain

答案 2 :(得分：0)

使用第一个子选择器

尝试此代码 
   .sitemap > li:first-child > a{
     background:green;
    }

＆＃13;
＆＃13; 
.sitemap > li:first-child > a{
  background:green;
}

.sitemap li a {
   text-transform: capitalize;
}
.sitemap .blog-sitemap-sub{
   text-decoration: none;
   color: #000;
   cursor: default;
}
＆＃13; 
<a href="#">Home Page</a>
<div class="main-sitemap">
   <ul class="sitemap">
       <li><a href="#">About us</a></li>
       <li><a href="#">success stories</a></li>
       <li><a href="#">giving back</a></li>
       <li><a href="#">tours</a></li>
       <li><a href="#">contact</a></li>
       <li><a href="#">membership
           <ul>
               <li><a href="#">dining discout deals</a></li>
               <li><a href="#">dreamtrips</a></li>
               <li><a href="#">travel deals discounts</a></li>
           </ul>
       </a></li>
       <li><a href="#">opportunity
           <ul>
               <li><a href="#">work at home oportunuty</a></li>
           </ul>
       </a></li> 
       <li><a href="#">careers
           <ul>
               <li><a href="#">our company</a></li>
               <li><a href="#">out culture</a></li>
               <li><a href="#">our brands</a></li>
           </ul>
       </a></li>
       <li class="blog-sitemap"><a href="#">Blog
           <ul>
               <li>
               <a href="/" class="blog-sitemap-sub" onclick="return false;">categories
                   <ul>
                       <li><a href="#">Chnaging lives</a></li>
                       <li><a href="#">experience more</a></li>
                   </ul>
               </a>
               </li>

           </ul>
            <ul>
               <li>
               <a href="/" class="blog-sitemap-sub" onclick="return false;">categories
                   <ul>
                       <li><a href="#">Chnaging lives</a></li>
                       <li><a href="#">experience more</a></li>
                   </ul>
               </a>
               </li>

           </ul>

       </a></li>
   </ul>
   </div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

试试此代码

＆＃13;
＆＃13; 
$('.sitemap li a').filter(':contains("About us")').css("background-color","RED")
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!DOCTYPE HTML>
<html dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, user-scalable=yes">
<title>site map</title>
</head>
<body>
<a href="#">Home Page</a>
<div class="main-sitemap">
   <ul class="sitemap">
       <li><a href="#">About us</a></li>
       <li><a href="#">success stories</a></li>
       <li><a href="#">giving back</a></li>
       <li><a href="#">tours</a></li>
       <li><a href="#">contact</a></li>
       <li><a href="#">membership
           <ul>
               <li><a href="#">dining discout deals</a></li>
               <li><a href="#">dreamtrips</a></li>
               <li><a href="#">travel deals discounts</a></li>
           </ul>
       </a></li>
       <li><a href="#">opportunity
           <ul>
               <li><a href="#">work at home oportunuty</a></li>
           </ul>
       </a></li> 
       <li><a href="#">careers
           <ul>
               <li><a href="#">our company</a></li>
               <li><a href="#">out culture</a></li>
               <li><a href="#">our brands</a></li>
           </ul>
       </a></li>
       <li class="blog-sitemap"><a href="#">Blog
           <ul>
               <li>
               <a href="/" class="blog-sitemap-sub" onclick="return false;">categories
                   <ul>
                       <li><a href="#">Chnaging lives</a></li>
                       <li><a href="#">experience more</a></li>
                   </ul>
               </a>
               </li>

           </ul>
            <ul>
               <li>
               <a href="/" class="blog-sitemap-sub" onclick="return false;">categories
                   <ul>
                       <li><a href="#">Chnaging lives</a></li>
                       <li><a href="#">experience more</a></li>
                   </ul>
               </a>
               </li>

           </ul>

       </a></li>
   </ul>
   </div>
</body>
<style>
.sitemap li a {
   text-transform: capitalize;
}
.sitemap .blog-sitemap-sub{
   text-decoration: none;
   color: #000;
   cursor: default;
}
</style>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题