2019-04-03所有选择器

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      p{
         color:red; 
      }
      .box{
         color:blue;
      }
      #container{
        font-size:30px;
        font-weight:bold; /*字体加粗*/
      }
  </style>
 </head>
 <body>
  <p>这是一个p标签</p>
  <p>vbvbbbv</p>
  <div class="box">这是一个div元素</div>
  <ul>
    <li class='box'>111111</li>
    <li class='box'>22222</li>
    <li class="box">33333</li>
  </ul>
  <div id="container">这是一个带id选择器的div</div>
  <div id='left'></div>
     <!--
        css:
           css选择器：
               1.元素选择器：
               2.类选择器：
                   html
                      <div class="box"></div>
                   css:
                       .box{}
               3.id选择器
                  html
                      <div id="container"></div>
                  css:
                       #container{}
                       注：同一个id选择器只能命名一次，因为id具有唯一性

               4.后代选择器：选取的是父元素下的所有子元素
                     ul li{}

               5.子代选择器：父元素下的直接子元素
                     ul>li{}
                           6.结构伪类选择器：
                                 ul class="list"{}
                                 .list>li:first-child{
                background:red;
             }
             .list>li:last-child{
                background:green;
             }
             .list>li:nth-child(2){
                background:yellow;
             }
             .list>li:nth-child(3){
                background:blue;
             }
             .list>li:nth-child(4){
                background:gray;
             }
                         字体样式：
                         .list>li{
                font-family:"黑体";
                font-size:18px;
                font-weight:bold;
                font-style:italic;
             }
     -->
 </body>
</html>
2019-04-03所有选择器

推荐阅读更多精彩内容
