您的位置：首页 > Web前端 > CSS

CSS3结构性伪类

2015-08-09 22:02 507 查看 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
border: 1px solid red;
height: 30px;
}
/*:root选择器是选择html元素*/
:root {
background-color: brown;
}

/*===============================================================
selector:nth-child(n):匹配符合selector，并且是其父元素的第n个元素
n也可以写作odd(奇数)、even(偶数)
n也可写作2n+1、3n+1、4n
selector:nth-last-child(n):匹配符合selector，并且是其父元素的倒数第n个元素
n也可以写作odd(奇数)、even(偶数)
*/
div.son:nth-child(odd) {
background-color: yellow;
}

/*===============================================================
selector:first-child:匹配符合selector，并且是其父元素的首个子元素
*/
div.firstlast-son:first-child {
background-color: white;
}
/*===============================================================
selector:last-child:匹配符合selector，并且是其父元素的最后一个子元素
*/
div.firstlast-son:last-child {
background-color: yellow;
}

/*===============================================================
selector:only-child:匹配符合selector，并且是其父元素的唯一的子节点
*/
p:only-child {
background-color: white;
}

/*===============================================================
selector:first-of-type:匹配符合selector，并且是与它同类型、同级的兄弟元素的第一个元素
selector:last-of-type:匹配符合selector，并且是与它同类型、同级的兄弟元素的最后一个元素
selector:nth-of-type(n):匹配符合selector，并且是与它同类型、同级的兄弟元素的第n个元素
selector:nth-last-of-type(n):匹配符合selector，并且是与它同类型、同级的兄弟元素的倒数第n个元素
*/
p.first-of-type:first-of-type {
background-color: white;
}
p.first-of-type:last-of-type {
background-color: yellow;
}

/*
selector:empty：匹配符合selector，并且内部没有任何子元素的元素
*/
div.empty:empty {
background-color: yellow;
}
</style>
</head>
<body>
<hr/>
<[b]div style="height: 60px">
:root选择器是选择html元素<br/>
:root {
background-color: brown;
}
</div>
<hr/>
<div style="height: 200px">
/*把类名为son的div，且是他的父类的第奇数个选出来*/<br/>
div.son:nth-child(odd) {
background-color: yellow;
}
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<hr/>
<div style="height: 80px">
<div style="height: 35px" class="firstlast-son">
selector:first-child:匹配符合selector，并且是其父元素的首个子元素<br/>
div.firstlast-son:first-child {
background-color: white;
}
</div>
<div style="height: 35px;" class="firstlast-son">
selector:last-child:匹配符合selector，并且是其父元素的最后一个子元素<br/>
div.firstlast-son:last-child {
background-color: yellow;
}
</div>
</div>
<hr/>
<div style="height: 80px">
<p>
selector:only-child:匹配符合selector，并且是其父元素的唯一的子节点<br/>
p:only-child {
background-color: white;
}
</p>
</div>
<hr/>
<div style="height: 200px">
<span>这是span</span>
<p class="first-of-type">
这是第一个p<br/>
e:first-of-type:匹配符合e，并且是与它同类型、同级的兄弟元素的第一个元素<br/>
p:first-of-type {
background-color: white;
}
</p>
<p class="first-of-type">这是第二个p</p>
<p class="first-of-type">
这是第三个p<br/>
e:last-of-type:匹配符合e，并且是与它同类型、同级的兄弟元素的最后一个元素<br/>
p:last-of-type {
background-color: yellow;
}
</p>
</div>
<hr/>
selector:empty：匹配符合selector，并且内部没有任何子元素的元素
div.empty:empty {
background-color: yellow;
}
<div style="height: 60px" class="empty"></div>
<div class="empty"><span>hahaha</span></div>
</body
968e
>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航