博主信息
博文 17
粉丝 1
评论 0
访问量 11793
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
3月21日作业
Nic的博客
原创
748人浏览过

基础选择器代码:

实例


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1.基本选择器</title>
	<style type="text/css">
		/*元素选择器*/
		ul {   
			padding: 0;
			margin: 0;
			width:100%;
			border: 1px dashed #666;
			padding: 10px 5px;

		}
		li{  text-align: center;





		}
        #item1 {
			color: red;
		}
		.green {
			color: lightgreen;
		}
		#item2 ~ li {
			color: yellow; 
		}
		
		
		


	</style>
</head>
<body><h3 align="center" padding:30px>火箭队首发阵容</h3>
	<ul>
		<li id="item1">克里斯保罗</li>
		<li class="green">詹姆斯哈登</li>
		<li class="green">阿里扎</li>
		<li id="item2">莱恩安德森</li>
		<li>卡培拉</li>
		
</body>
</html>

运行实例 »

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

属性选择器代码:

实例


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3.属性选择器</title>
	<style type="text/css">
		/*元素选择器*/
		ul {   
			padding: 0;
			margin: 0;
			width:100%;
			border: 1px dashed #666;
			padding: 10px 5px;

		}
		li{  text-align: center;





		}
       
		li[class ~= "red"] {
			color: brown;
		}
		li[class="green"] {
			color: lightgreen;
		}
		
		
		


	</style>
</head>
<body><h3 align="center" padding:30px>勇士队首发阵容</h3>
	<ul>
		<li id="item1">斯蒂芬库里</li>
		<li class="green">克莱汤普森</li>
		<li class="green red">凯文杜兰特</li>
		<li class="red">格林</li>
		<li id="item2">帕楚利亚</li>
		
</body>
</html>

运行实例 »

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

手抄代码:IMG_20180325_201615.jpg

批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系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+教程免费学