简单整理下CSS里的常用各种选择器

  CSS里我们常用的的选择器大概分为以下几种：

            1：id选择器（id="名称"） ，使用方式  #名称

            2：类选择器（class=“名称”），使用方式   .名称

            3：标签（属性）选择器，使用方式直接在标签后面 添加属性即可

            4：组选择器（以逗号进行分割的选择器），使用方式列如.class1，.class2，.class3

            5：后代选择器，后代选择器又分为两种：

                 （1）父子选择器：只选择它的儿子，而不选择孙子及之后的后代；使用方式：父亲>儿子（如ul>li）

                 （2）后代选择器：选择它所有的后代，使用方式：父亲+空格+儿子（如div p）

            6：兄弟选择器，它也分为两种：

                 （1）最亲兄弟选择器：只选择离它最近的一个兄弟，而对其他兄弟不选择；使用方式：（p+p）

                 （2）普通兄弟选择器：选择它所有的兄弟，使用方式：（p~p）

            7：伪类选择器，它分为多种，以下只介绍最常用的几种，

                  （1）hover选择器：鼠标指针位于其上时显示什么的选择器，使用方式：（p：hover{ 显示的属性}）

                 （2）after选择器：列如（p:after)是在每个p元素的内容后面插入内容，使用方式（p:after{显示的属性}，同理before是在之前

                 （3）child选择器：它又分为很多种，

                               <1>例：(p：first-child{ }) 意思是选择p标签里的第一个孩子，同理 last-child 是选择最后一个

                                <2>例：（p :only-child{  }）选择p标签里唯一一个孩子

                                <3>例：( p：nth-child(odd){ }）选择p标签里是奇数的孩子，同理even是选择偶数的孩子

                  <4>例：（P:nth-child（3n+1）{ }）n=0,1,2,3...选择p标签里第1 4 7...的孩子

          （4）例： (#div1 p:nth-child(2){  })查找div1里面的第二个子标签，如果是p则命中，不是则不命中

          （5）例： (#div1 p:nth-of-type(2){  })查找div1孩子里面的第二个p元素，nth-last-of-type（2）,查找倒数第二个p元素

          （6）例： (#div4 p:first-of-type{  })查找div4下的第一个p元素

   注：星号选择器（*）命中所有元素，一般是为了清除浏览器默认的margin值和padding值设定他们的值为0，如*{margin:0；padding：0}