css选择器

css选择器

一、基本选择器

1. *

   选择所有元素。

2. E

   选择对应标签的元素。

3. .class

   选择对应类名的元素。

4. #id

   选择对应id的元素。

5. E F

   选择E元素内部所有F元素。

6. E > F

   选择E元素的所有直接子元素中的F元素。

7. E + F

   选择紧跟着E元素之后的相邻兄弟节点F元素。

8. E ~ F

   选择跟着E元素之后的所有兄弟节点中的F元素。

二、属性选择器

1. E[attr]

   选择所有带有attr属性元素。

2. E[attr = "value"]

   选择所有使用attr="value"的元素。

3. E[attr ^="value"]

   选择所有使用attr属性以"value"开头的元素。

4. E[attr $="value"]

   选择所有使用attr属性以"value"结尾的元素。

5. E[attr *="value"]

   选择所有使用attr属性包含"value"的元素。

6. E[attr ~="value"]

   选择所有使用attr属性包含"value"或"(空格)value"的元素。

7. E[attr |="value"]

   选择所有使用attr属性包含"value"或"-value"的元素。

三、伪类选择器

1. :link,:visited,:hover,:active,:focus

   通常是与a标签结合。
   :link ，选择所有未访问链接。
   :visited ，选择所有访问过的链接。
   :hover ，选择所有访问过的链接。
   :active ，选择被点击的链接。
   :focus ，选择鼠标在链接上时的链接。

2. :first-line,:first-letter

   通常是与文字标签结合。
   :first-line ，选择元素的第一行。
   :first-letter ，选择元素的第一个字母。

3. :enabled,:disabled,:checked

   通常是与表单标签结合。
   :enabled ，选择每一个已启用的输入元素。
   :disabled ，选择每一个禁用的输入元素。
   :checked ，选择每个选中的输入元素。

4. :first-chilid,:last-child

   :first-chilid ，选择只有当此元素是其父级的第一个子级的元素。
   :last-child ，选择只有当此元素是其父级的最后一个子级的元素。

5. :nth-child(n),:nth-last-child(n)

   :nth-child(n) ，选择此元素是其父级的第n个子元素的元素。
   :nth-last-child(n) ，选择此元素是其父级的倒数第n个子元素的元素。

6. :first-of-type,:last-of-type

   :first-of-type ，选择此元素是其父级的第一个这个标签的元素。
   :last-of-type ，选择此元素是其父级的最后一个这个标签的元素。

7. :nth-of-type(n),:nth-last-of-type(n)

   :nth--of-type(n) ，选择此元素是其父级的第n个这个标签的元素。
   :nth-last-of-type(n) ，选择此元素是其父级的倒数第n个这个标签的元素。

8. :only-child,:only-of-type

   :only-child ，选择此元素是其父级的唯一子元素。
   :only-of-type ，选择此p元素是其父级的唯一这个标签的元素。

9. :root

   选择文档的根元素。

10. :empty

    选择每个没有任何子级的p元素（包括文本节点，空格）。

11. :not()

    选择每个并非此元素的元素。

12. :before,:after

    :before ，在元素之前插入内容。
    :after ，在元素之后插入内容。