css选择器

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

1、*：通用选择器

1  * {
2      margin: 0;
3      padding: 0;  
4 }

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

2、#id：id选择器

1  #id {
2        width：1200px;
3        height: 500px;  
4 }    

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

3、.class：类选择器

1  .class {
2           width: 1200px;
3           height: 500px;
4 } 

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

4、 tagName：标签选择器

1  div {
2        width: 1200px;
3        height: 500px;
4 }  

 查找页面所有指定的标签

5、 selector1 selector2：后代选择器

1  div p {
2          width: 1200px;
3          height: 500px;
4 }  

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

6、selector1 > selector2 : 子选择器

1  div > p {
2            width: 1200px;
3            height: 500px;
4 }

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

7、 selector1 + selector2 ：相邻选择器

1  div + p {
2            width: 1200px;
3            height: 500px;
4 }

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

8、 selector1 ~ selector2 : 兄弟选择器

1 div ~ p {
2           color: red;  
3 }

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

9、 属性选择器

       1 selector[title] :

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

     2 selector[href="foo"]

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

     3 selector[href^="foo"] 

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

     4 selector[href$="foo"]  

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

     5 selector[href*="foo"]  

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

     6 selector[class~="foo"]

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

     7 selector[class|="foo"]

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

 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”选择器就可以选中这个元素中的唯一一个类型子元素。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有