基本选择器作业演示：http://111.231.88.20/front/html/0321/1.html
属性选择器作业演示：http://111.231.88.20/front/html/0321/2.html
基本选择器左右
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器作业</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
/*通配符选择器，去除页面中所有的内边距和外边距*/
*{
margin: 0;
padding: 0;
}
/*全部兄弟选择器*/
.top img ~ span{
color: #fff;
}
#img01{
height: 45px;
}
/*ID+父子选择器*/
#item02 td{
color: #666;
}
/*类+父子选择器*/
.new img{
height: 60px;
}
.new02{
color: #666;
}
</style>
</head>
<body>
<!-- 头部使用内联样式+内部样式 -->
<div class="top" style="width:980px;height: 60px;background:#363636;">
<img src="images/163logo.png" style="height: 55px">
<span>发现音乐</span>
<span>我的音乐</span>
</div>
<!-- 使用内部样式+ID选择器 -->
<div id=item>
<h3>云音乐特色榜</h3>
<table>
<tr id="item01">
<td rowspan="2"><img src="images/01.png" id="img01"></td>
<td><strong>云音乐飙升榜</strong></td>
</tr>
<tr id="item02">
<td>每天更新</td>
</tr>
</table>
</div>
<!-- 使用内部样式+类选择器 -->
<div class="new">
<table>
<tr class="new01">
<td rowspan="2"><img src="images/02.png"></td>
<td><strong>云音乐新歌榜</strong></td>
</tr>
<tr class="new02">
<td>每天更新</td>
</tr>
</table>
</div>
<!-- 外部样式+子元素选择器 -->
<div>
<table>
<tr class="original">
<td rowspan="2"><img src="images/03.png"></td>
<td><strong>原创排行榜</strong></td>
</tr>
<tr>
<td>每周更新</td>
</tr>
</table>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
基本选择器外部样式表
实例
/*子元素选择器*/
div > table{
background: lightyellow;
}
td > img {
height: 80px;
}
/*相邻兄弟选择器*/
.original + tr{
color: blue;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
属性选择器作业
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
ul{
list-style:none;
width: 200px;
}
/*选择所有带class属性的元素*/
li[class]{
background: lightblue;
}
/*根据属性名和属性值选择*/
li[id="enfant"]{
background: green;
}
/*属性值中包括指定单词，需要匹配整个属性值*/
li[class ~="men"]{
color: red;
}
/*属性值中有指定字母开头的*/
li[class ^="d"]{
color: blue;
}
/*属性值中有指定字母结尾的*/
li[class $="d"]{
color: brown;
}
/*属性值中包括指定字母的，只需要属性值中有指定字母*/
li[id *="e"]{
color: purple;
}
</style>
</head>
<body>
<h3>商品分类</h3>
<ul>
<li class="men">男式正装</li>
<li class="women men">男女休闲装</li>
<li id="enfant">童装</li>
<li class="dap">家用电器</li>
<li id="gen">珠宝配饰</li>
<li class="phone pad">手机平板</li>
<li class="drink">零食饮料</li>
<li class="fte bed">家具家纺</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码
