css3——属性选择器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3——属性选择器相关的知识，希望对你有一定的参考价值。
E:nth-child(n) 表示E父元素中的第n个字节点
•p:nth-child(odd){background:red}/*匹配奇数行*/
•p:nth-child(even){background:red}/*匹配偶数行*/
•p:nth-child(2n){background:red}
•p:nth-child(2n+1){background:blue}
E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算
E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E
E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1px solid #000;} body *:nth-child(1){margin-left:10px;}/* 无论何种类型都选择第一个 */ p:nth-child(1){color:#fff;} p:first-child{padding:20px;} p:nth-last-child(1){color:#fff;} p:last-child{padding-left:20px;} p:nth-child(odd){background:red;} p:nth-child(even){background:blue;} h2:nth-of-type(2){background: green;} p:nth-last-of-type(3){color:#999;} h3:first-of-type{color:pink;} h2:last-of-type{color:#fff;} p:empty{height:40px;border:10px solid green;} p *:only-child{border:10px dashed pink;} p *:only-of-type{border:10px dashed pink;} </style> </head> <body> <p>p1</p> <h1>h1</h1> <p>p2</p> <h2>h2</h2> <p>p3</p> <h3>h3</h3> <p>p4</p> <h2>h222</h2> <p>p5</p> <p></p> <p><span>123</span></p> <p><span>123</span><a>456</a></p> </body> </html>
E:empty 表示E元素中没有子节点。注意：子节点包含文本节点
以上是关于css3——属性选择器的主要内容，如果未能解决你的问题，请参考以下文章