css选择器

常用css选择器，希望对大家有所帮助，不喜勿喷。

1、*：通用选择器

 * {
     margin: 0;
     padding: 0;  
}

 选择页面上的全部元素，通常用于清除浏览器默认样式，不推荐使用。

2、#id：id选择器

 #id {
       width：1200px;
       height: 500px;  
}    

 优先级别较高，id名最好唯一。

3、.class：类选择器

 .class {
          width: 1200px;
          height: 500px;
} 

 class名可以重复，可以修饰多个元素。

4、 tagName：标签选择器

 div {
       width: 1200px;
       height: 500px;
}  

 查找页面所有指定的标签

5、 selector1 selector2：后代选择器

 div p {
         width: 1200px;
         height: 500px;
}  

 例如：查找div后代所有的p标签

6、selector1 > selector2 : 子选择器

 div > p {
           width: 1200px;
           height: 500px;
}

例如：查找div子类所有的p标签（只能是子类）

7、 selector1 + selector2 ：相邻选择器

 div + p {
           width: 1200px;
           height: 500px;
}

例如：查找与div相邻的p标签

8、 selector1 ~ selector2 : 兄弟选择器

div ~ p {
          color: red;  
}

例如：查找div后面所有同级的p标签

9、 属性选择器

       1 selector[title] :

 p [id] { /*查找包含id属性的p标签*/
          color: red;      
}

     2 selector[href="foo"]

 a [href="www.baidu.com"] { /*查找href="www.baidu.com的a标签"*/
          color: black;
}

     3 selector[href^="foo"] 

 a [href ^= "http"] {/*查找href已http开头的a标签*/
          color: black;
}

     4 selector[href$="foo"]  

 a [href $= "rar"] {/*查找href已rar结尾的a标签*/
          color: black;
}

     5 selector[href*="foo"]  

 a [href *= "o"] {/*查找href包含‘o'的a标签*/
          color: black;
}

     6 selector[class~="foo"]

 p [class ~= "b"] {/*class类名为b且b前面或后面有空格的p标签(空格分隔多值的标签 <div class="a b"></div>)*/
          color: black;
}

     7 selector[class|="foo"]

 p [class |= "b"] {/*class类名为b且b后面有横杠的p标签(<div class="b-c"></div>)*/
          color: black;
}

 10、 伪性选择器

　　1 selector:link        平常的状态(默认)。

       2 selector:visited   被点击过之后

       3 selector:hover    鼠标放到连接上的时候

       4 selector:active   连接被按下的时候

       5 selector:checked   按钮被选中 (input[type=radio]:checked)

       6 selector:before,selector:after  

       7 selector1:not(selector2)  取反

       8 selector::first-line  选择标签下第一行

       9 selector::first-letter 选择标签下第一个字

       10 selector::selection  选择被选中的文字

       11 selector:first-child  (p:first-child)找到P，然后找P的父级 再找父级下第一个元素是P（匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。）

        12 selector:first-of-type  (p:first-of-type)找到P，然后找P的父级 再找父级下第一个元素是P（匹配的是该类型的第一个，这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。）

       13 selector:last-child  (p:last-child)找到P 然后找P的父级 再找父级下最后一个元素是P

       14 selector:last-of-type  (p:last-of-type) 找到P 然后找P的父级 再找父级下最后一个元素是P

         15 selector:nth-child(2)  (li:nth-child(2))  找到li 然后找li的父级 再找父级下第二个元素是li

         16 selector:nth-of-type(2)  (li:nth-of-type(2))  找到li 然后找li的父级 再找父级下第二个元素是li

       17 selector:nth-last-child(2)  (li:nth-last-child(2))  找到li 然后找li的父级 再找父级下倒数第二元素个是li

         18 selector:nth-last-of-type(2)  (li:nth-last-of-type(2))  找到li 然后找li的父级 再找父级下倒数第二元素个是li

       19 selector:nth-child(even)    (li:nth-child(even))  找到li的所有偶数位(2N)

       20 selector:nth-last-child(even)    

       21 selector:nth-child(odd)    (li:nth-child(odd))  找到li的所有奇数位(2N-1 或 2n+1)

       22 selector:nth-last-child(odd)    

       23 selector:only-child  (li:only-child) 找到li是父级的唯一子元素(选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素)

       24 selector:only-of-type  (li:only-of-type) 表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。