css结构伪类

CSS 快速掌握 admin 327浏览

css3=css2+新语法+新的属性,就是对css2进行扩充/删减/优化.

结构伪类

选择器 功能
E:first-child 匹配第一个孩子
E:last-child 匹配最后一个孩子
E:nth-child(n) 匹配第n个孩子
E:nth-child(2n)或E:nth-child(even) 匹配偶数的孩子,如:2,4,6,8...
E:nth-child(2n+1)或E:nth-child(odd) 匹配奇数的孩子,如:1,3,5,7,9...
E:only-child 匹配有且只有一个孩子

代码结构div.box>ul>li{css快速掌握$}*3

		<div class="box">
			<ul>
				<li>css快速掌握1</li>
				<li>css快速掌握2</li>
				<li>css快速掌握3</li>
			</ul>
			<ul>
				<li>
					如何匹配有且只有一个孩子
				</li>
			</ul>
		</div>

样式结构

		<style type="text/css">
			div ul li:only-child{
				color: #f00;
			}
		</style>

转载请注明:大灰牛博客 » css结构伪类