实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
div{
width: 250px;
height: 100%;
border:solid 2px red;
}
#naifen{
border: solid 2px navy;
}
h2{
padding-top: 10px;
width: 251px;
height: 60px;
text-align: center;
background-color: red;
color: azure;
margin: 0;
}
tr th{
color: red;
}
.dd2{
color: HotPink;
}
tr>td{
text-align: center;
}
#jd2+td{
background: red;
border-radius: 100px;
color: azure;
}
*[id]{
background:forestgreen;
border-radius: 200px;
color: azure;
}
td[class^="s"]{
background-color: gold;
border-radius: 100px;
}
td[class="dd2"]{
border: solid 2px red;
border-radius: 10px;
}
</style>
</head>
<body>
<div>
<table cellpadding="10">
<h2>全球购商品类目</h2>
<tr>
<th>奶粉辅食</th>
<td id="naifen">奶粉</td>
<td>辅食</td>
</tr>
<tr>
<th>尿裤用品</th>
<td>尿裤</td>
<td>用品</td>
</tr>
<tr>
<th>个护美妆</th>
<td>护肤</td>
<td>香水</td>
</tr>
<tr>
<th>营养保健</th>
<td>调节</td>
<td>美容</td>
</tr>
<tr>
<th>进口美食</th>
<td id="jd2">牛奶</td>
<td>冲调</td>
</tr>
<tr>
<th>数码家电</th>
<td>手机</td>
<td>家电</td>
</tr>
<tr>
<th>钟表首饰</th>
<td>男表</td>
<td>女表</td>
</tr>
<tr>
<th>服饰箱包</th>
<td id="jd1">自营</td>
<td>服装</td>
</tr>
<tr>
<th>运动户外</th>
<td>运动</td>
<td id="jiluyi">户外</td>
</tr>
</table>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码：
