博客列表 >3月21日作业

3月21日作业

kaclod的博客
kaclod的博客原创
2018年03月22日 14:09:55509浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第五次作业</title>
	<style type="text/css">
	/*元素选择器*/
		ul {
			padding:5;
			margin:0;
			width:500px;
			background-color: skyblue;

		}

		li {
			list-style:none;

		}
		/*id选择器	*/
		#top1 {
			background-color:red;

		}
		/*类选择器*/
		.green {
			background-color:lightgreen;
		}
		/*父子选择器*/
		ul li {
			color:blue;
		}
		/*通配符选择器*/
		ul * {
			border:1px solid;
		}
		/*子元素选择器*/
		ul >li{
			backgrond-color:blue;
		}
			/*根据属性名和值修改*/
		li[class="red"] {
			background-color:red;
		}
			/*根据属性名来选择*/
		*[id] {
			background-color: yellow;
		}
		/*选择属性中包含t的类样式元素*/
		li[class *="t"] {
			background-color:yellowgreen;
		}

	</style>
</head>
<body>
	<ul >
		<li id="top1">子鼠</li>
		<li class="green">丑牛</li>
		<li class="green">寅虎</li>
		<li>卯兔</li>
		<li class="red">辰龙</li>
		<li>巳蛇</li>
		<li class="red">午马</li>
		<li>未羊</li>
		<li>申猴</li>
		<li id= "top2">酉鸡</li>
		<li id="top3">戌狗</li>
		<li>亥猪</li>

	</ul>
</body>
</html>

运行实例 »

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

IMG_0032.JPGIMG_0033.JPG


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议