003css3结构伪类选择器和属性选择器

最新推荐文章于 2020-12-23 06:33:06 发布

陀陀吖

最新推荐文章于 2020-12-23 06:33:06 发布

阅读量96

点赞数

分类专栏： h5c3

本文链接：https://blog.csdn.net/weixin_40422393/article/details/88937423

版权

h5c3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3结构伪类选择器和属性选择器</title>
<style>
li:hover{}

/*1、结构选择器*/
	li:first-child{
		color: red;
	}
	ul li:last-child{
		color: pink;
	}
	/*	ul li:second-child{
		color: blue;     z这是错误的写法
	}*/

/*语法：nth-child(n)  选中间的li*/
	ul li:nth-child(3){
		color: blue;
	}
	ul li:nth-child(4){
		color: green;
	}

/*选择所有的偶数*/
	ul li:nth-child(even){     /*even表示偶数*/
		background-color: purple;
	}

/*选择所有奇数*/
	ul li:nth-child(odd){    /*odd选择所有奇数*/
		background-color: yellow;
	}

/*选择所有的Li*/
	ul li:nth-child(n){
		margin-top: 10px;
	}

/*2n表示偶数的li*/
	ul li:nth-child(2n){    /*2n=even*/
		margin-top: 10px;
	}

/*2n+1表示奇数的li*/
	ul li:nth-child(2n+1){    /*2n+1=odd*/
		margin-top: 10px;
	}




/*2、属性选择器*/

/*选择所有的class元素*/
	div[class]{
		color: red;
	}

/*选出class=one的*/
	div[class=one]{
		color: pink;
	}

/*以three开头的class给选出来*/
	div[class^=three]{
		color: yellow;
	}

/*以three结尾的class选出来*/
	div[class$=three]{
		color: blue;
	}

/*选择所有带有test的class*/
	div[class*=three]{
		color: purple;
	}

</style>
</head>
<body>
<!-- 1、结构选择器 -->
	<ul>
		<li>大桥</li>
		<li>小青</li>
		<li>小哈</li>
		<li>笑话</li>
		<li>啊哈</li>
	</ul>

<!-- 2、属性选择器 -->
	<div class="one">王者荣耀</div>
	<div class="two">刺激战场</div>

	<div class="firstthree">刺激战场</div>
	<div class="three">王者荣耀</div>
	<div class="three1">刺激战场</div>
	<div class="three2">刺激战场</div>
</body>
</html>

陀陀吖

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>css3结构伪类选择器和属性选择器</title><style>li:hover{}/*1、结构选择器*/ li:first-child{ color: red;...
复制链接

扫一扫

专栏目录