父元素 子元素: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,因为该语句是合并语句,只是为了简写,并无继承关系