8-15作业编程

<!DOCTYPE html>    
<html>    
<head>    
	<title>css中常用的选择器</title>    
	<meta charset="utf-8">    
	<link rel="stylesheet" type="text/css" href="style.css">    
</head>    
<style>    
	body{    
		font-size: 20px;    
	}    
	ul{    
		font-weight: :body;    
	}    
</style>    
<body>    
	<ul>    
		<li class="item1">item1</li>    
		<li class="item2">item2</li>    
		<li id="item3">item3</li>    
		<li class="item4">item4</li>    
	</ul>    
	<style>    
		h2{    
			color: blue!important;    
			color: cyan;    
		}    
	</style>    
	<h2 style="color: red">css选择器</h2>    
	<style>    
		/*标签选择器*/    
		ul{    
			margin: 0;    
			width: 100px;    
			border: 1px dashed #999999;    
			padding: 10px 5px;    
		}    
		ul li{    
			list-style: none;    
			float: left;    
			width: 40px;    
			height: 50px;    
		}    
		/*id选择器*/    
		#item3{    
			background-color: green;    
		}    
		/*类选择器*/    
		.item1{    
			background-color: red;    
		}    
		/*属性选择器*/    
		ul li[class="item6"]{    
			background-color: black;    
		}    
		/*属性选择器:属性值中以什么开头*/    
		ul li[class^="u"]{    
			background-color: gray;    
		}    
		/*属性选择器:属性值中以什么结尾*/    
		ul li[class$="7"]{    
			background-color: #999999;    
		}    
		/*属性选择器:属性值包含*/    
		ul li[class*="u"]{    
			background-color: gray;    
		}    
		body ul li{    
			border: 1px solid black;    
		}    
		/*子选择器*/    
		ul>li[class="7"]{    
			background-color: greenyellow;    
		}    
		/*相邻选择器*/    
		ul li[class$="2"]~ *{    
			color: white;    
		}    
		/*相邻兄弟选择器*/    
		ul li[class$="6"]+li{    
			color: red;    
		}    
		/*群组选择器*/    
		h1,h2,p{    
			font-size: 3rem;    
		}    
		/*伪类选择器：链接*/    
		/*访问前*/    
		a:link{    
			color: red;    
		}    
		/*访问后*/    
		a:visited{    
			color: yellow;    
		}    
		/*获取焦点的时候*/    
		a:focus{    
			color: purple;    
		}    
		/*鼠标悬停*/    
		a:hover{    
			color: blue;    
		}    
		/*鼠标点击激活*/    
		a:active{    
			color: blue;    
		}    
		/*伪类选择器：位置*/    
		ul li:first-child{    
			background-color: #e24233;    
		}    
		ul li:last-child{    
			background-color: #333333;    
		}    
		ul li:ntn-child(2){    
			background-color: red;    
		}    
		ul li:ntn-child(even){    
			/*偶数*/    
			background-color: purple;    
		}    
		ul li:ntn-child(odd){    
			/*奇数*/    
			background-color: purple;    
		}    
		/*伪类选择器：数量*/    
		ul li:only-chlid{    
			background-color: lawngreen;    
		}    
		:empty{    
			width: 200px;    
			height: 200px;    
			background-color: red;    
		};    
		:empty:after{    
			content: 'adddd';    
		};    
		:empty:before{    
			content: url();    
		};    
	</style>    
	<ul>    
		<li class="item1">item1</li>    
		<li class="item2">item2</li>    
		<li id="item3">item3</li>    
		<li class="item4">item4</li>    
		<li class="item5">item5</li>    
		<li id="item6">item6</li>    
		<li class="uitem7">item7</li>    
	</ul>    
	<h1>css1</h1>    
	<h2>css2</h2>    
	<p>css3</p>    
	<a href="www.baidu.com">baiduyixia</a>    
	<div></div>    
</body>    
</html>
相关文章
