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}