css 기초 공고한 선택기

프런트엔드 업계에 진출한 지 한참이 되었는데, 늘 결점을 느낀다.이전에 체계적인 학습을 거치지 않았는지 (이전에는 항상 뭘 써서 뭘 찾았는지) 항상 자신의 기초가 튼튼하지 않다고 느낀다.드디어 다시 한 번 체계적으로 기초 지식을 배우고 기초를 공고히 하기로 결정했습니다. 저는 모든 신들이 이렇게 지나가야 한다고 생각합니다. 저도 우수한 전단 개발자가 될 거라고 믿습니다. 다만 저는 과정이 필요합니다.
좀 더 노력하면 생활이 더 좋아질 거야...
만약 이 문장 중에 무슨 잘못된 점이 있다면 반드시 지도해 주십시오. 동생은 감격해 마지 않습니다.동시에 이 글이 나와 같은 풋내기에게 어느 정도 도움이 되었으면 좋겠다.
소스 코드 실행 효과 표시:http://sandbox.runjs.cn/show/jl74m4es
   
html 코드:

<div class='ClassName'>     ："."+  .eg:---.className{……}</div>
    <div id="IDName">ID   ："#"+idName。eg:-------#IDName{……}</div>
    <h1>     ：  (  )  .eg----------h1{……}</h1>

    <h2>     ：     +","+n     +{},eg:----h2, .group{……}</h2>
    <div class="group">     ：     +","+n     +{},eg:----h2, .group{……}</div>

    <p class="">     ：    [+    +]{},eg：---p[class]{},  ，  p ，   class     </p>
    <div class="p">
      <p class="">     ：    [+    +]{},eg：---<strong>.p</strong>[class]{},  ，class='p'      ， class     </p>
    </div>
    
    <input type="text" value="      ：    ['   '='   ']{},eg：----input[type='text']{}">

    <ul class="parent">
      <li>     ：   +"  "+   {}。eg:----.parent li{}</li>
      <li>     ，  ul class='parent',   .parent li{}，  ：                    。  ，          。       ，       </li>
    </ul>

    <ul class="parent01">
      <li>     ：   +"  >  "+   {}。eg:----.parent01 > li{}</li>
      <li>     ，  ul class='parent',   .parent01 > li{}。  ：                     ，  ，            ，        (     ，  )，</li>
    </ul>

    <h1>  h1  </h1>
    <h6 class="h6">       ：    +    {}，eg:--------h1 + .h6{},  ，h1     class h6   </h6>

    <a href="javascript:void(0)" class="a1">     ：:link,   </a>
    <a href="#" class="a2">     ：:visited,   </a>
    <a href="#" class="a3">     ：:hover,       </a>
    <a href="javascript:void(0)" class="a4">     ：:active,    </a>

    <input type="text" class="input" value="     ：:focus">

    <p class="p01">     ：:before/:after.       ，        。eg:------.p01:before{}</p>

    <ul class="parent03">
      <li>     ：:first-child,        .eg:-----.parent03 > li:first-child{}</li>
      <li>    li       </li>
      <li>     ：:last-child，         。.parent03 > li:last-child{}</li>
    </ul>

    <ul class="parent04">
      <li>css3     ：:first-of-type,        .eg:-----.parent03 > li:first-of-type{}</li>
      <li>css3     ：:nth-child(n), n     .eg:-----.parent03 > li:nth-child(2){}</li>
      <li>    </li>
      <li>css3     ：:last-of-type,         .eg:-----.parent03 > li:last-of-type{}</li>
    </ul>

css 코드:

*{margin:0;padding:0}
body{overflow-x:hidden;padding-bottom:50px}
.ClassName{height:50px;margin-top:30px;color:#fff;line-height:50px;text-indent:50px;background-color:#454545}
#IDName{height:50px;margin-top:30px;line-height:50px;text-indent:50px;background-color:#f47920}
h1{height:50px;margin-top:30px;line-height:50px;text-indent:50px;background-color:#905a3d}
h2,.group{height:50px;margin-top:30px;line-height:50px;text-indent:50px;background-color:#8f4b2e}
p[class],.p[class][alt]{height:50px;line-height:50px;text-indent:50px;margin-top:30px;background-color:#5f3c23}
input[type="text"]{width:100%;height:50px;margin-top:30px;text-indent:50px;font-size:30px;border:0;background-color:#757522}
.parent,.parent01{list-style:none;margin-top:30px;padding-bottom:15px;overflow:hidden;background-color:#80752c}
.parent li{height:100%;line-height:50px;margin-top:15px;margin-left:15px;margin-right:15px;background-color:#454926;text-indent:35px}
.parent01>li{height:100%;line-height:50px;margin-top:15px;margin-left:15px;margin-right:15px;background-color:#b7ba6b;text-indent:35px}
h1+.h6{height:50px;font-size:16px;line-height:50px;text-indent:50px;margin-top:30px;background-color:#2e3a1f}
a{display:block;height:50px;text-indent:50px;line-height:50px;margin-top:30px;text-decoration:none}
.a1:link{color:#fff;background-color:#5e005e}
.a2:link{color:#fff;background-color:#7b7b7b}
.a2:visited{color:#000;background-color:#ea0000}
.a3:link{color:#000;background-color:#ff0080}
.a3:hover{color:#fff;background-color:#921aff}
.a4:link{color:#000;background-color:#ff0080}
.a4:active{color:#fff;background-color:#921aff}
.input:focus{background-color:#be77ff}
.p01{height:50px;line-height:50px;text-indent:50px;background-color:#9f35ff}
.p01:before{content:'   css  ';background-color:#c1c1c1}
.parent03,.parent04{list-style:none;margin-top:30px;padding-bottom:15px;overflow:hidden;background-color:#80752c}
.parent03>li,.parent04>li{height:100%;line-height:50px;margin-top:15px;margin-left:15px;margin-right:15px;background-color:#b7ba6b;text-indent:35px}
.parent03>li:first-child{background-color:#f0f}
.parent03>li:last-child{background-color:#be77ff}
.parent04>li:first-of-type{background-color:#adadad}
.parent04>li:last-of-type{background-color:#606060}
.parent04>li:nth-child(2){background-color:#b15bff}