首页 > 代码库 > 为什么选择器li#id名/li.类名的写法

为什么选择器li#id名/li.类名的写法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      *{

        padding:0;

        margin:0;

      }

      ul.uls{

        float:left;

      }

      ul.uls li{

        display:inline;

      }

      ul.uls li a{

        border-left:1px solid red;

        padding:10px;

        text-decoration:none;

      }
    </style>
  </head>
  <body>
    <ul class="uls">
      <li class="info"><a href="http://www.mamicode.com/">a</a></li>
      <li><a href="http://www.mamicode.com/">b</a></li>
      <li><a href="http://www.mamicode.com/">c</a></li>
      <li><a href="http://www.mamicode.com/">d</a></li>
      <li><a href="http://www.mamicode.com/">e</a></li>
    </ul>
  </body>
</html>

  那代码运行效果为:

  技术分享

  

 

  而此时想将第一个<a>标签的边框去掉,如果设置   .info a 选择器:

  .info a{

    border:none;

  }

  运行之后会发现未起作用,第一个<a>标签的边框依然还在。

  

  可以尝试下面写法:

  ul.uls li.info a{

    border:none;

  }

  结果:

  技术分享

 

  我只知其然,不知其所以然,具体原因有朋友知道可以分享一下。

为什么选择器li#id名/li.类名的写法