实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器+html标签 2018年8月15号作业</title>
<style>
body{}
.form{
width:500px;
margin: auto;
background: #dddddd;
padding: 20px;
}
h4{text-align: center;}
span,label{
display: inline-block
}
.form div{
width: 400px;
margin:15px auto;
height: 30px;
}
.form div span{
width:80px ;
text-align: justify;
}
.form div label{
width:30px ;
}
.form div input{
width:300px ;
border: solid 1px #CCC;
outline: none;
line-height: 28px;
}
#sex1,#sex2{
width:30px;
}
.form .hobby input{
width: 30px;
}
.form .lab{
padding-left:40px;
}
.form .btn{
text-align: center;
}
.form .btn input{
width: 80px;
height: 34px;
background: #008800;
border-radius: 5px;
color: #FFF;
cursor: pointer;
}
.form .btn input:last-child{
background: brown;
}
table{
margin: auto;
border-collapse: collapse;
text-align: center;
}
thead{
font-weight: bold;
background: #CCC;
}
tr,td{
border: solid 1px #CCC;
font-family: "微软雅黑";
line-height: 34px;}
caption{
margin: 20px auto;
font-size: 24px;
}
td[colspan="3"]{
background: #CCC;
}
tr:nth-child(even){
background: aquamarine;
}
table:after{
content:'以上是css选择器';
}
tr:hover{background: #f8cbcb;}
</style>
</head>
<body>
<form action="" class="form">
<h4>表单提交</h4>
<hr>
<div><span>用户名：</span><input type="text" name="user" value=""></div>
<div><span>密 码：</span><input type="password" name="pwd" value=""></div>
<div><span>性 别：</span><label for="sex1" class="lab">男</label><input type="radio" name="sex" id="sex1"> <label for="sex2">女</label><input type="radio" name="sex" id="sex2"></div>
<div class="hobby"><span>爱 好：</span><input type="checkbox" name="hobby[]" value="上网">上网 <input type="checkbox" name="hobby[]" value="爬山">爬山<input type="checkbox" name="hobby[]" value="唱歌">唱歌</div>
<hr>
<div class="btn"><input type="submit" name="submit" value="提交"> <input type="reset" name="submit" value="reset"></div>
</form>
<hr>
<table width="600">
<caption>css选择器</caption>
<thead>
<tr>
<td>选择器</td>
<td>示例</td>
<td>示例说明</td>
</tr>
</thead>
<tr>
<td>标签选择器</td>
<td>a|p|div|span|...</td>
<td>标签元素</td>
</tr>
<tr>
<td>类选择器</td>
<td>.box</td>
<td>class="box"</td>
</tr>
<tr>
<td>ID选择器</td>
<td>#box</td>
<td>id="box"</td>
</tr>
<tr>
<td colspan="3">伪类选择器:链接</td>
</tr>
<tr>
<td>a:link</td>
<td colspan="2">访问前</td>
</tr>
<tr>
<td>a:visited</td>
<td colspan="2">访问后</td>
</tr>
<tr>
<td>a:focus</td>
<td colspan="2">获取焦点时</td>
</tr>
<tr>
<td>a:hover</td>
<td colspan="2">鼠标悬停</td>
</tr>
<tr>
<td>a:active</td>
<td colspan="2">鼠标点击</td>
</tr>
<tr>
<td colspan="3">伪类选择器</td>
</tr>
<tr>
<td>:first-child</td>
<td>p:first-child</td>
<td>选择所有p元素的第一个</td>
</tr>
<tr>
<td>:last-child</td>
<td>p:last-child</td>
<td>选择所有p元素的最后一个</td>
</tr>
<tr>
<td>:nth-child(n)</td>
<td>p:nth-child(1)</td>
<td>选择所有p元素的第1个</td>
</tr>
<tr>
<td>:only-child</td>
<td>p:only-child</td>
<td>选择所有只有一个子元素p的标签</td>
</tr>
<tr>
<td>:nth-last-child</td>
<td>p:nth-last-child(3)</td>
<td>选择所有p标签的倒数第3个</td>
</tr>
<tr>
<td>:nth-of-type</td>
<td>li:nth-of-type(2)</td>
<td>选择每个Li中的第2个子元素</td>
</tr>
<tr>
<td>:empty</td>
<td>div:empty</td>
<td>选择空的div</td>
</tr>
<tr>
<td>:after</td>
<td>div:after</td>
<td>在div元素后添加内容</td>
</tr>
<tr>
<td>:before</td>
<td>p:before</td>
<td>在p元素前添加内容</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
