Blogger Information
Blog 9
fans 0
comment 0
visits 5050
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
常用选择器 - 2019年09月03日
睡在键盘上
Original
526 people have browsed it

1、相邻选择器与兄弟选择器

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		
		/* 相邻选择器 就是选择与当前选择器相邻的下一个选择器 */
		.c1 + * {
			color:red;
		}
		
		/* 兄弟选择器  当前选择器后面的所有选择器(不包括当前选择器) */
		
		.c1 ~ *{
			color: blue;
		}
		
		
	</style>
	<body>
		<ul->
			<li>苹果</li>
			<li id="c2">桔子</li>
			<li class="c1">芒果</li>
			<li>西瓜</li>
			<li>面包</li>
			<li>哈密瓜</li>
			<li>草莓</li>
		</ul->
	</body>
</html>

运行实例 »

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


2、nth-child和nth-of-type


实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		
		/* nth-child:选择父元素下面等于第几个的子元素,下方就是选择ul里面等于第4的元素,无论什么类型的标签 */
		/* 关注点:是子元素所属的位置 */
		ul :nth-child(4) {
		    color: blue;
		}
		
		
		/* nth-of-type:选择父元素下面等于第几个的子元素,下方就是选择ul里面等于第4的li */
		/* 关注点:1、是子元素所属的位置  2、同时子元素的类型也要一样*/
		ul li:nth-of-type(4) {
		    color: red;
		}
		
		
		
	</style>
	<body>
		<ul>
			<p>水果</p>
			<li>苹果</li>
			<li>桔子</li>
			<li>芒果</li>
			<li>西瓜</li>
			<li>面包</li>
			<li>哈密瓜</li>
			<li>草莓</li>
		</ul>
	</body>
</html>

运行实例 »

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

 


3、padding对盒子的影响

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		
		.big{
			width: 400px;
			height:400px;
			border: 1px solid red;
		}
		.hezi{
			width:  200px;
			height: 200px;
			border: 1px solid blue;
			
			padding: 20px;
			box-sizing: border-box;  
		}
		
		
	</style>
	<body>
		<div class="big">
			<div class="hezi">
				小盒子
			</div>
		</div>
	</body>
</html>

运行实例 »

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

 

4、margin中的同级塌陷, 嵌套传递与自动挤压


实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		
	/*同级坍塌:就是2个盒子原色的margin会以大的为准,相当于重叠了小的数值部分*/
	.div1{
		width: 300px;
		height:300px;
		margin-bottom: 50px;
		background: red;
	}
	.div2{
		width: 300px;
		height: 300px;
		margin-top: 30px;
		background: blue;
	}
	
		
	/* 嵌套传递   就是子元素的margin会导致父元素增加,这就是margin导致的,可以修改子元素用padding代替 */
		.div3{
			width: 300px;
			height:300px;
			background: red;
		}
		
		.div4{
			width: 200px;
			height:200px;
			margin-top: 50px;
			background: #999;
		}
		
		
		/* 自动挤压 : 可以自动挤压左边或右边 */
		/* 通常用于盒子居中对齐 */
		.div5{
			border: 1px solid #006400;
			width: 600px;
			height: 300px;
			margin: 0 auto;  
		}
		
	</style>
	<body>
		<div class="div1">我是盒子1</div>
		<div class="div2">我是盒子2</div>
		
		<div class="div3">
			<div class="div4">
				盒子4
			</div>
		</div>
		
		<div class="div5">
			我这个盒子居中对齐
		</div>
	</body>
</html>

运行实例 »

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

 

Correction status:qualified

Teacher's comments:案例写是比较 丑, 但是实用, 简单, 一目了然, 符合我的风格
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