CSS3选择器

一、常用的css选择器包括ID选择器、类选择器、标签选择器、后代选择器、群体选择器、全局选择器、伪类选择器

  1.ID选择器：   

      示例：<div id="warpper">     </div>

      #warpper{  样式 }

  2.类选择器：

      示例：<div class="warpper">     </div>

      .warpper{  样式 }

   3.标签选择器：

      示例：<div>     </div>

       div{  样式 }

    4.后代选择器

     示例：<div>  <p>选择</p>     </div>

       div p{  样式 }

   5.群体选择器

    示例：<div> <p>选择</p>  <span>选择</span>  <a href="">选择</a>  </div>

    div,p,span,a{样式}

  6.全局选择器

    *{ 样式}  表示页面上所有元素都选中

  上面只是简单的记了一下标识符和大概使用方法，在开发中往往是混合使用，不是纯标签选择

  7伪类

    1)连接类   

       a:link{ 样式}  访问前

       a:hover{样式}   鼠标覆盖

       a:active{样式}   鼠标摁下到松开时

       a:visited{样式}    已访问状态

     IE6以下版本不支持，:hover必须置于:link和visited之后才有效，:active必须置于:hover后有效，伪类名称对大小写不敏感

     2)子代选择器

       本来这个应该做选择器单独写，但我觉得写法和伪类差不多，就搁这里了，反正好使

       p:only-child{样式}    当父元素下只有一个子元素时才有用，不然无效

       p:first-child{样式}     父元素的第一个子元素，如果父元素的第一个子元素不是p，将无法选中

       p:nth-child(n){样式}         父元素的第n个子元素是p元素，若不是则无法选中

       p:last-child{样式}               父元素的最后一个元素是p元素，若不是则无法选中

       p:nth-of-type(n){样式}        选中父元素中的第n个p元素，不管有没有其他元素阻隔

      p:nth-last-of-type(n){样式}   从后面开始选择，选中倒数第n个元素，不管有没有其他元素阻隔

      p:only-of-type{样式}   选中父元素下唯一p元素，允许有别的子元素存在

     我觉得用子代选择器有一个注意点就是选择时，要考虑到整个页面中所有存在子代 ，不考虑的话可能在你不想

要的地方也加上了样式。