从 css 中的 Ul 和 LI 中选择

【问题标题】：Select from Ul and LI in css从 css 中的 Ul 和 LI 中选择
【发布时间】：2016-12-16 10:25:25
【问题描述】：

如何从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>

【问题讨论】：

  • ul li:nth-child(1)

标签： javascript jquery html css .net


【解决方案1】：

您可以使用:first-child 伪类选择器来获取集合中的第一个子元素，使用direct child(&gt;) 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>

【讨论】：

  • 如果你也能包含一些关于子选择器的信息会很棒，这样新用户就可以理解这种选择子的方式。
【解决方案2】： 

ul li:nth-child(1) a{color:red}
<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>

使用ul li:nth-child(1)

【讨论】：

    【解决方案3】：

    用第一个子选择器试试这个代码

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


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

.sitemap li a {
   text-transform: capitalize;
}
.sitemap .blog-sitemap-sub{
   text-decoration: none;
   color: #000;
   cursor: default;
}
    <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>

    【讨论】：

      【解决方案4】：

      试试这个代码

      $('.sitemap li a').filter(':contains("About us")').css("background-color","RED")
      <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>

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2021-07-03
        • 1970-01-01
        • 2023-03-23
        • 2019-02-05
        • 1970-01-01
        • 2021-11-25
        • 2014-01-29
        • 2014-01-28
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode