CSS3 选择器

一.子元素选择器

CSS3 选择器_第1张图片

CSS3 选择器_第2张图片

二.属性选择器

CSS3 选择器_第3张图片

CSS3 选择器_第4张图片

三.伪类选择器

CSS3 选择器_第5张图片

CSS3 选择器_第6张图片

CSS3 选择器_第7张图片

四.子元素选择器

CSS3 选择器_第8张图片
  1. div p:nth-child(1)
    获得div中的p标签的父元素的第一个子元素,且第一个子元素必须为p标签
  2. div p:first-child/div p:last-child
    div中的p标签的父元素的第/最后一个子元素,且子元素必须为p标签
  3. div p:only-child
    选择的是独生子的p标签,不能有任何兄弟元素
  4. div p:nth-last-child(3)
    获得div中的p标签的父元素的倒数第3个子元素,且必须为p标签
  5. div p:nth-of-type(1)
    找div中第一个p标签
  6. div p:nth-last-of-type(2)
    找所有div中倒数第二个p标签
  7. div p:only-of-type
    p标签父级元素的唯一p元素子标签,可以有兄弟元素

五.文本选择器

CSS3 选择器_第9张图片

CSS3 选择器_第10张图片

你可能感兴趣的:(CSS3 选择器)