CSS基本选择器联系代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3月21日作业 CSS基本选择器练习</title>
<style type="text/css">
ul {
margin: 0;
width: 250px;
padding: 10px 5px;
}
ul:after {
content:'';
display: block;
clear:both;
}
li {
list-style: none;
float: left;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 50%;
background: skyblue;
margin-right: 5px;
}
#item1 {
background-color: red;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" align="center" width="900">
<caption><h3>基本选择器</h3></caption>
<tr>
<th>选择器</th>
<th>代码举例</th>
<th>功能描述</th>
<th>实例演示</th>
</tr>
<tr>
<td>元素选择器</td>
<td>ul{}</td>
<td>选择指定类型的html元素</td>
<td>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</td>
</tr>
<tr>
<td>id选择器</td>
<td>#id{}</td>
<td>选择指定id属性值的任意类型的html元素</td>
<td>
<ul>
<li >1</li>
<li id="item1">2</li>
<li>3</li>
<li>4</li>
</ul>
</td>
</tr>
<tr>
<td>类择器</td>
<td>.class{}</td>
<td>选择指定class属性值的的任意类型的任意多个元素</td>
<td>
<ul>
<li >1</li>
<li >2</li>
<li class="red">3</li>
<li>4</li>
</ul>
</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS层次选择器联系代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3月21日作业 CSS层次选择器练习</title>
<style type="text/css">
ul {
padding: 0;
margin: 0;
width: 250px;
/*border: 0px dashed #666;*/
padding: 10px 5px;
}
ul:after {
content:'';
display: block;
clear:both;
}
li {
list-style: none;
float: left;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 50%;
background: skyblue;
margin-right: 5px;
}
/* ul li {
color: black;
｝*/
/* ul> li {
background-color: red;
}
*/
#item2 + li {
background-color: black;
}
#item2 ~ li {
background-color: black;
}
</style>
</head>
<table border="1" cellspacing="0" cellpadding="5" align="center" width="900">
<caption><h3>层次选择器</h3></caption>
<tr>
<th>选择器</th>
<th>代码举例</th>
<th>功能描述</th>
<th>实例演示</th>
</tr>
<tr>
<td>父子选择器</td>
<td>ul li{}</td>
<td>选择包含在共同父级下的指定元素</td>
<td>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</td >
</tr>
<tr>
<td>子元素选择器</td>
<td>ul>li{}</td>
<td>选择父元素下指定子元素</td>
<td>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</td>
</tr>
<tr>
<td>相邻兄弟选择器</td>
<td>#item2+li{}</td>
<td>选择指定元素后面的第一个元素</td>
<td>
<ul>
<li id="item2">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</td>
</tr>
<tr>
<td>全部兄弟选择器</td>
<td>#item2~li{}</td>
<td>选择指定元素后面的所有元素</td>
<td>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li id="item2">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS属性选择器联系代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3月21日作业 CSS属性选择器练习</title>
<style type="text/css">
ul {
padding: 0;
margin: 0;
width: 250px;
/*border: 0px dashed #666;*/
padding: 10px 5px;
}
ul:after {
content:'';
display: block;
clear:both;
}
li {
list-style: none;
float: left;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 50%;
background: skyblue;
margin-right: 5px;
}
*[id] {
background-color: red;
}
li[class="grn"] {
background-color: red;
}
li[class ~= "my"] {
background-color: red;
}
li[class ^= "ma"] {
background-color: red;
}
li[class $= "123"] {
background-color: red;
}
li[class *= "8"] {
background-color: red;
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" align="center" width="900">
<caption><h3>属性选择器</h3></caption>
<tr>
<th>选择器</th>
<th>代码举例</th>
<th>功能描述</th>
<th>实例演示</th>
</tr>
<tr>
<td>属性选择器</td>
<td>li[class]{}</td>
<td>选择所有带有指定属性的元素</td>
<td>
<ul>
<li>1</li>
<li id="item1">2</li>
<li>3</li>
<li>4</li>
</ul>
</td>
</tr>
<tr>
<td>属性选择器</td>
<td>li[class="值"]{}</td>
<td>选择所有指定属性等于指定值的元素</td>
<td>
<ul>
<li>1</li>
<li >2</li>
<li class="grn">3</li>
<li>4</li>
</ul>
</td>
</tr>
<tr>
<td>属性选择器</td>
<td>li[class~="值"]{}</td>
<td>选择所有指定属性值中包含指定单词的元素</td>
<td>
<ul>
<li>1</li>
<li class="css my ww">2</li>
<li>3</li>
<li>4</li>
</ul>
</td>
</tr>
<tr>
<td>属性选择器</td>
<td>li[class^="值"]{}</td>
<td>选择所有以指定属性值开头的元素</td>
<td>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="maddddd">4</li>
</ul>
</td>
</tr>
<tr>
<td>属性选择器</td>
<td>li[class$="值"]{}</td>
<td>选择所有以指定属性值结尾的元素</td>
<td>
<ul>
<li class="wowo123">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</td>
</tr>
<tr>
<td>属性选择器</td>
<td>li[class*="值"]{}</td>
<td>选择所有指定属性值中包含指定值的元素</td>
<td>
<ul>
<li>1</li>
<li class="2324870">2</li>
<li>3</li>
<li>4</li>
</ul>
</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄作业：
