选择器的类型有：

  • id选择器 #id
  • 类选择器 .class
  • 元素选择器(标签) tag
  • 通用选择器 *
  • 属性选择器 [title=".."]
  • 伪类选择器 :alive
  • 伪元素选择器 ::first-line
  • 子元素选择器 > 或空格
  • 相邻选择器 +

选择器的权重

  1. 内联样式 权重1000
  2. id选择器 权重0100
  3. 类、伪类、属性选择器 权重0010
  4. 元素、伪元素选择器 权重0001
  5. 通配符、子选择器、相邻选择器 权重0000
  6. 继承的样式没有权重

css伪类

css伪类是用来添加一些选择器的特殊效果

  • a:link

  • a:visited

  • a:hover

  • a:active
    在css的定义中，a:hover必须置于a:link和a:visited之后才有效
    a:active必须在a:hover之后

  • :first-child 如p:first-child选择器匹配作为任何一个元素的第一个子元素的p元素
    p>i:first:child

  • p:first-of-type 选择的每个p元素是其父元素的第一个p元素（即不要求处于第一位，只要是第一个p即可，p在第二位也不怕）

  • last-child

  • last-of-type

  • :not(selector)

  • p:nth-child(n)所有p元素的第二个子元素

  • p:nth-last-child(n)所有p元素的倒数第二个子元素

  • only-of-type所有仅有一个元素为p的元素

  • only-child选择所有仅有一个子元素的p元素

  • focus

  • first-letter

  • first-line ，每个p元素的第一行

  • ：before 在每个p元素之前插入内容

  • ：after在每个p元素之后插入内容

伪元素

用于添加一些选择器的特殊效果
:first-line--只能用于块元素
:first-line
：before
:after