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

巴特西

css选择器

最新文章

热门文章