css3高级选择器

278 阅读2分钟

父元素 子元素:first-of-type{声明;}

父元素下第一个类型type的子元素

父元素 子元素:last-of-type{声明;}

父元素下最后一个类型type的子元素

父元素 子元素:only-of-type{声明;}

当父元素下,只有一个类型type的子元素时,该声明生效

父元素 子元素:first-child{声明;}

父元素下第一个子元素

父元素 子元素:last-child{声明;}

父元素下最后一个子元素

父元素 子元素:nth-child(n){声明;}

父元素下第n个子元素
eg
<div>
  <span>我是span</span>
  <p>我是p1</p>
  <p>我是p2</p>
  <p>我是p3</p>
</div>
div p:nth-child(n)指的是p1,而不是p2,因为div下第一个p的位置被span占据了,所以如果父元素内有其他元素,则可能导致声明不能实现

父元素 子元素:before{content:"";声明;}

在父元素下的所有子元素的显示语句前面加content内容;且内容样式可由下面的声明生效

父元素 子元素:after{content:"";声明;}

在父元素下的所有子元素的显示语句后面加content内容;且内容样式可由下面的声明生效

优先级

给以下方式赋值

  • !important=无穷大
  • 行内样式=1000
  • ID选择器=100
  • class/属性/伪类=10
  • 标签选择器=1
  • *通配符=0 !important>id选择器>class选择器>标签选择器

    eg1
    body .a{声明;}的权重=1+10=11
    eg2
    .a,#box{声明;}的权重应该分开看.a与#box,因为该语句是合并语句,只是为了简写,并无继承关系