结构伪类选择器

最新推荐文章于 2020-12-06 00:29:55 发布

Lgw_zuiyouxiu

最新推荐文章于 2020-12-06 00:29:55 发布

阅读量166

点赞数

文章标签：结构伪类选择器

本文链接：https://blog.csdn.net/Lgw_zuiyouxiu/article/details/97274165

版权

1.结构伪类选择器
E:empty{属性：属性值;}
选中E元素中内容为空的E元素,最终只会选择到E元素，不会选择到其他元素

		:root{属性：属性值;}
			选择到根元素，在html中根元素就是html元素，所以   :root{属性：属性值;} ==== html{属性：属性值;}
		*/
		ul li{height: 40px;}
		ul div{height: 40px;}
		ul li:empty{background: pink;}
		:root{font-size: 40px;}
	</style>
</head>
<body>
	<ul>
		<li>1</li>
		<li></li>
		<li>3</li>
		<div></div>
		<li>4</li>
		<li>5</li>
		<li></li>
		<li>7</li>
	</ul>

		不限定元素类型---父元素中的所有子元素都会参与计算
		D E:nth-child(规律){属性：属性值;}
			找到D元素中符合规律的E元素，但是如果D元素中有非E元素的其他元素，也会算在规律中，但是执行的时候只会给符合规律E元素执行样式，符合规律的其他元素是不会执行样式的
		D E:nth-last-child(规律){属性：属性值;}
			和:nth-child（）的计算方式一样，但是计算顺序相反，nth-child是从上往下计算，nth-last-child是从下往上计算
			
			
		限定元素类型---父元素中的匹配的子元素才会参与计算
		D E:nth-of-type(规律){属性：属性值;}
			找到D元素中符合规律的E元素，但是如果D元素中有非E元素的其他元素，会排除在外，不参与计算，执行的时候只会给符合规律E元素执行样式
		D E:nth-last-of-type(规律){属性：属性值;}
			和:nth-of-type（）的计算方式一样，但是计算顺序相反，nth-of-type是从上往下计算，nth-last-of-type是从下往上计算
			
		规律：  n  n是个变量，从0开始，一次向后递增，递增到元素的个数位置
				数字  对应数字的元素会执行样式
				表达式  列如 2n  2n+1 3n-2
				odd  奇数个
				even 偶数个
		/*#box li:nth-child(n){background: blue;}*/
		/*#box li:nth-child(2){background: blue;}*/
		/*#box li:nth-child(2n){background: blue;}*/
		/*#box li:nth-child(2n-1){background: blue;}*/
		/*#box li:nth-child(3n+3){background: blue;}*/
		/*#box li:nth-child(odd){background: blue;}*/
		/*#box li:nth-child(even){background: blue;}*/
		/*#box li:nth-last-child(odd){background: pink;}*/
		/*#box li:nth-last-child(even){background: pink;}*/
		
		/*#box li:nth-of-type(n){background: pink;}*/
		/*#box li:nth-of-type(6){background: pink;}*/
		/*#box li:nth-of-type(2n+1){background: pink;}*/
		/*#box li:nth-of-type(odd){background: pink;}*/
		/*#box li:nth-of-type(even){background: pink;}*/
		/*#box li:nth-last-of-type(even){background: pink;}*/
		#box li:nth-last-of-type(3){background: pink;}
	</style>
</head>
<body>
	<ul id="box">
		<li>1</li>
		<div>div1</div>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<div>div2</div>
		<li>5</li>
		<li>6</li>
		<div>div3</div>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
		<li>11</li>
	</ul>

		不限定元素类型---父元素中的所有子元素都会参与计算
		D E:nth-child(规律){属性：属性值;}
			找到D元素中符合规律的E元素，但是如果D元素中有非E元素的其他元素，也会算在规律中，但是执行的时候只会给符合规律E元素执行样式，符合规律的其他元素是不会执行样式的
		D E:nth-last-child(规律){属性：属性值;}
			和:nth-child（）的计算方式一样，但是计算顺序相反，nth-child是从上往下计算，nth-last-child是从下往上计算
			
			
		限定元素类型---父元素中的匹配的子元素才会参与计算
		D E:nth-of-type(规律){属性：属性值;}
			找到D元素中符合规律的E元素，但是如果D元素中有非E元素的其他元素，会排除在外，不参与计算，执行的时候只会给符合规律E元素执行样式
		D E:nth-last-of-type(规律){属性：属性值;}
			和:nth-of-type（）的计算方式一样，但是计算顺序相反，nth-of-type是从上往下计算，nth-last-of-type是从下往上计算
			
		规律：  n  n是个变量，从0开始，一次向后递增，递增到元素的个数位置
				数字  对应数字的元素会执行样式
				表达式  列如 2n  2n+1 3n-2
				odd  奇数个
				even 偶数个
		
		E F:only-child{属性：属性值;}
			选择父元素E内只包含一个子元素，且匹配为F元素           限定子元素的数量
		E F:only-of-tyle{属性：属性值;}
			选择父元素E中只包含一个同类型的子元素，且匹配为F元素    不限定子元素的数量，限定匹配元素的数量
		
		不限定元素类型
			E F:first-child{属性：属性值;}
				选中父元素E中的第一个子元素F，如果第一个子元素是F,就执行样式,如果不是则不执行
			E F:last-child{属性：属性值;}
				选中父元素E中的最后一个子元素F，如果最后一个子元素是F,就执行样式,如果不是则不执行
			
		限定元素类型
			E F:first-of-type{属性：属性值;}
				选中父元素E中具有指定类型的第一个子元素F
			E F:last-of-type{属性：属性值;}
				选中父元素E中具有指定类型的最后一个子元素F
		*/
		
		/*ul li:only-child{background: blue;}*/
		/*ul li:only-of-type{background: blue;}*/
		
		/*#box li:first-child{background: green;}
		#box li:last-child{background: pink;}*/
		
		#box li:first-of-type{background: orange;}
		#box li:last-of-type{background: yellow;}
	</style>
</head>
<body>
	<ul id="box">
		<li>1</li>
		<div>div</div>
		<li>2</li>
		<li>3</li>
		<h3>h3</h3>
		<li>4</li>
		<li>5</li>
		<p>ppp</p>
	</ul>

Lgw_zuiyouxiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
结构伪类选择器

1.结构伪类选择器E:empty{属性：属性值;}选中E元素中内容为空的E元素,最终只会选择到E元素，不会选择到其他元素 :root{属性：属性值;} 选择到根元素，在html中根元素就是html元素，所以 :root{属性：属性值;} ==== html{属性：属性值;} */ ul li{height: 40px;} ul div{height: 40px;} ...
复制链接

扫一扫