基本选择器

1. 通用选择器（匹配所有元素）

* {
    格式：* {}
}

1. 元素选择器（html元素）

h1 {
    格式：元素名 {}
}

1. 类选择器（class类名）

.name {
    格式：.类名 {}
}

1. id选择器（元素id是唯一的）

#ol {
    格式：#id名 {}
}

复合选择器

1. 交集选择器（两个元素构成，第一个必须是元素选择器，第二个必须是类选择器或者id选择器）

span.content {
    格式：元素.类名 或 元素#id名 {}
}

1. 并集选择器（两个或者两个以上的任意选择器构成）

h2, p, span {
    格式：选择器1, 选择器2, 选择器3 {}
}

1. 后代选择器（选择器1的所有子元素）

body .content {
    格式：选择器1 选择器2 选择器3 {}
}

1. 子元素选择器（选择器1的直接子元素）

body > .content {
    格式：选择器1 > 选择器2 {}
}

1. 相邻兄弟选择器（匹配紧跟在选择器1元素后的相邻元素，且两个元素拥有共同的父元素）

.content + p {
    格式：选择器1 + 选择器2 {}
}

1. 通用兄弟选择器（匹配在选择器1元素后的相邻元素，且两个元素拥有共同的父元素）

.content ~ p {
    格式：选择器1 ~ 选择器2 {}
}

伪元素选择器

• ::first-line选择器（匹配文本块的第一行内容）

::first-line { /*只对块级元素的第一行生效*/
    格式：::first-line {}
}

p::first-line { /*指定对p元素的第一行生效*/
    格式：p::first-line {}
}

• ::first-letter选择器（匹配文本块的第一个字符）

::first-letter {
    格式：::first-letter {}
}

::first-letter { /*只对div元素的第一个字符生效*/
    格式：div::first-letter {}
}

• ::before选择器和::after选择器（在元素的最前面或最后面插入内容）

a::before { /*在a元素的开头插入内容*/
    content:插入的内容
}

a::after { /*在a元素的末尾插入内容*/
     content:插入的内容
}

• ::selection选择器（匹配用户选中的部分文本）

::selection {
    属性：属性值
}

伪类选择器

• 动态伪类选择器

  1. :link（链接未被访问时）
  2. :visited（链接被访问过时）
  3. :hover（鼠标悬停在链接上方时）
  4. :active（鼠标点下链接的那一刻）
  5. :focus（元素获得焦点时）

  a:link {
      color:pink;
  }

• UI伪类选择器

  1. :enabled（表单元素可用的样式）
  2. :disabled（表单元素禁用的样式）
  3. :checked（表单元素选项被选中时的样式 0.
  4. :required（表单必选元素的样式）
  5. :optiional（表单可选元素的样式）
  6. :default（表单默认元素的样式）

  :enabled {
      color:red;
  }

  1. :valid（用户输入合法的样式）
  2. :invalid（用户输入不合法的样式）

  input:valid {
      color:green;
  }

属性选择器

input[value] { /* 选择input标签中具有value属性的元素 */
    color:red;
}

input[value="hello"] { /* 选择input标签中value属性值为hello的元素 */
    color:red;
}

input[value^="icon"] { /* 选择input标签中value属性值以icon开头的元素 */
    color:red;
}

input[value$="icon"] { /* 选择input标签中value属性值以icon结尾的元素 */
    color:red;
}

input[value*="icon"] { /* 选择input标签中value属性值包含icon的元素 */
    color:red;
}

结构伪类选择器

ul li:first-child { /* 匹配父元素ul中的第一个子元素li */
    color:red;
}

ul li:last-child { /* 匹配父元素ul中的最后一个子元素li */
    color:red;
}

ul li:nth-child(n) { /* 匹配父元素ul中的第n个子元素li */
    color:red;
}

ul li:nth-child(even) { /* 匹配父元素ul中所有偶数的子元素li */
    color:red;
}

ul li:nth-child(odd) { /* 匹配父元素ul中所有奇数的子元素li */
    color:red;
}

ul li:nth-child(2n) { /* 匹配父元素ul中所有偶数的子元素li */
    color:red;
}

ul li:nth-child(2n+1) { /* 匹配父元素ul中所有奇数的子元素li */
    color:red;
}

ul li:nth-child(5n) { /* 匹配父元素ul中5倍数的子元素li */
    color:red;
}

ul li:nth-child(n+5) { /* 匹配父元素ul中从第5个以后的子元素li */
    color:red;
}

ul li:nth-child(-n+5) { /* 匹配父元素ul中前5个子元素li */
    color:red;
}

区别：

1.nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和选择的元素匹配

2.nth-of-type 对父元素里面指定的子元素进行排序选择。先去匹配子元素，然后再根据子元素找第n个孩子

ul li:first-of-type { /* 指定类型li的第一个 */
    color:red;
}

ul li:last-of-type { /* 指定类型li的最后一个 */
    color:red;
}

ul li:nth-of-type { /* 指定类型li的第n个 */
    color:red;
}

待更新......