Blogger Information
Blog 25
fans 0
comment 0
visits 18840
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css选择器学习
℃级的博客
Original
616 people have browsed it
实例
标签选择器*/
ul{
	border:1px dashed red;
	margin-top:0;
	margin-bottom: 0;
	padding-left: 0;
	overflow:hidden;
}
/*层级选择器*/
ul li{
	list-style-type:none ;
	width:40px;
	height:40px;
	background-color: wheat;
	float:left;
	text-align:center;
	border-radius:100%;
	line-height:40px;
	box-shadow:2px 2px 1px #555;
	margin-left:10px;
}
/*id 选择器*/
#id1{
	background-color:lightblue;
}
/*class选择器*/
.c1{

	background-color:lightgreen;
}
/*群组选择器*/
#id1,.c1{
         border:1px solid black;
}
/*相连选择器*/
#id1 + *
{
	background-color:yellow;
}
/*/*兄弟选择器*/
.c1 ~ *{
	background-color:yellow;

}
运行实例 »
点击 "运行实例" 按钮查看在线实例

1.bmp


实例

/*伪类选择器*/
ul  :first-child{
	background-color: coral;
}
ul :last-child{
	background-color: coral;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

2.bmp

实例

/*伪类 类型选择器*/
ul li:last-of-type{
	background-color: red;
}
ul li:first-of-type{
	background-color: darkorchid;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

3.bmp

体会:css选择器较多,分类有id选择器,class选择器+,兄弟选择器~,相连选择器,伪类选择器,

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post