博主信息
博文 35
粉丝 2
评论 0
访问量 27436
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
2018.3.21 practice5
小学僧的博客
原创
1297人浏览过

手写链接:https://www.llheng.com/img/index.html

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS选择器</title>
<style type="text/css">
	p{
		font-family: microsoft yahei;
	}
	h4{
		font-family: microsoft yahei;
	}
	#first{
		background-color: #006400;	/*1*/
	}
	.square{
		background-color: #6495ED;	/*2*/
	}
	tr td{
		font-size: 20px;
		font-family: microsoft yahei;
		text-align: center;
		width: 25px;
	}
	tr *{
		border: 2px solid #000080;
		color: #fff;
	}
	 tr > td{
		background-color: gray;
	}
	#cla ~ td {
		background-color:#D19275;	/*9*/
	}
	#cla + td{
		background-color: #A0522D;	/*10*/
	}			
/*属性选择器样式设置*/
	*[class]{
		font-size: 10px;
	}
	td[class="demo"]{
		background-color: #4169E1;
	}
	td[class ~= "de"]{	
		background-color: #98FB98;
	}
	td[class ^= "tab"]{
		background-color: #2F4F4F;
	}
	td[id $= "or"]{
		background-color: #DCDCDC;
	}
	td[class *= "ll"]{
		background-color: #F0E68C;
	}
/*伪类选择器*/
	 p:first-child{
		color: red;
	}
	 p:last-child{
		font-size: 20px;
	}
	p:only-child{
		background-color: #DCDCDC;
	}
	h4:only-of-type{	/*指定类型*/
		color: green;
	}
</style>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="15" >
		<caption><h2>基本选择器</h2></caption>
		<tr>
			<td id="first">1</td>
			<td  class="square">2</td>
			<td>3</td>
			<td >4</td>
			<td >5</td>
			<td>6</td>
			<td id="cla">7</td>
			<td >8</td>
			<td>9</td>
			<td>10</td>			
		</tr>
	</table>
	<p style="height: 50px;">
	<table border="1" cellspacing="0" cellpadding="15" >
		<caption><h2>属性选择器</h2></caption>
		<tr>
			<td class="table">1</td>
			<td >2</td>
			<td>3</td>
			<td class="demo">4</td>
			<td class="test de">5</td>
			<td>6</td>
			<td id="color">7</td>
			<td >8</td>
			<td class="yellow">9</td>
			<td>10</td>			
		</tr>
	</table>
	<p style="height: 50px;">
	<p ><h2 style="text-align: left;margin-left: 230px">伪类选择器</h2></p>
	<div style="margin-left: 160px">
	<div style="width: 300px">
		<p>当前div唯一子元素</p>
	</div>
	<p style="height: 10px;">
	<div>
		<p>当前div第一个子元素</p>
		<p>当前div第二个子元素</p>
	</div>
	<p style="height:10px;">
	<div>
		<p>当前div唯一类型为p的子元素</p>
		<h4>当前div另一个子元素h4</h4>
	</div>	
	</div>
</body>
</html>

运行实例 »

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


批改状态:合格

老师批语:作业已检查! 完成的不错!大赞!!
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学