选择器

分类：

• 元素选择器

  • 标签:
    使用标签作为选择
    <p>
  • ID:
    使用ID作为选择
    #id值
  • 类(class):
    .class值
    使用类作为选择

• 关系选择器

  • 后代选择器(空格)
    div p
    选择所有div标签下的所有p标签(>)
  • 子代选择器
    div>p
    选择所有div标签下的直接（一层）儿子p标签
  • 交集选择器(没有分割)
    div.class1
    选择所有的div标签，class=class1的标签，两个相交的部分
  • 并集选择器(,)
    h2,p
    同时选择所有h2标签和所有p标签

<div>
  <h2>我是标题</h2>
  <p>我是段落1</p>
  <p class="class1">我是段落2</p>
</div>

• 兄弟选择器

  • 只选择后面的一个+
    h2+p
    只选择“我是段落1”
  • 选择后面的所有~
    h2~p
    选择后面的所有p标签

• 序选择器

  • 只有一个(only)
    :only-child

  • 第一个(first)
    :first-child
:first-of-type

  • 最后一个(last)
    :last-child
:last-of-type

  • 第几个(n,可以是数字;odd;even;xn+y)
    :nth-child(n)
:nth-of-type(n)

  • 倒数第几个(last n,可以是数字;odd;even;xn+y)
    :nth-last-child(n)
:nth-last-of-type(n)