CSS3回顾_结构性伪类

1,结构性伪类

p:nth-child(odd){background:red;} /*匹配奇数*/

p:nth-child(even){background:blue;}/*匹配偶数*/

p a[href*=exl]{ background-image:url(img/x.gif);}  /* href 下面包含pdf 的 元素*/

p:nth-child(n) /*匹配父元素的第N个元素*/

p:nth-child(even){background:blue;}/*匹配偶数*/

body *:nth-child(2){background:red;}/*匹配body下面的第二个元素*/

p*:nth-last-child(2n){background:red;}/*把倒数第2、第4、第6、…、所有3的倍数的p的背景设为橙色*/

p:nth-of-type(2)   找p标签父级下的第二个p元素

p:nth-last-of-type(2) 找p标签父级下的倒数第二个p元素

{

p:first-child 第一个子类

:first-child==:nth-child(1)

:last-child==:nth-last-child(1)

:first-of-type==nth-of-type(1)

:last-of-type==nth-last-of-type(1)

}

p:empty   p为空的 类

p~ul   选择器 p之后出现的所有ul。 两种元素必须拥有相同的父元素,但是 ul不必直接紧随 p。

你可能感兴趣的:(CSS3回顾_结构性伪类)