Maz*_*zen 5 css css-selectors css3
我正在尝试创建一个简单的3x3网格(使用<table>),所有单元格都有1px边框.如果我只是使用CSS为所有<td>元素赋予1px边框,那么内部边框将堆叠并创建2px边框,因此我对每个元素的处理方式<td>不同.我成功地这样做并使用nthchild来减少CSS.但是,我的问题是为什么使用更少的CSS选择器的某种逻辑方式不起作用.
这是我的HTML
<!DOCTYPE html>
<html>
<head>
<title>3x3 grid</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
</html>
这是有效的CSS:
td{
border: 1px #000;
width:30px;
height: 30px;
text-align: center;
border-style: solid;
}
tr:nth-child(2) td{
border-top: 0px;
}
tr:nth-child(3) td{
border-top: 0px
}
td:nth-child(1){
border-right: 0px;
}
td:nth-child(3){
border-left: 0px;
}
table{
border-spacing: 0px;
border-collapse: separate;
}
这是使用少一个选择器并且应该工作的CSS但是不知何故所有上部单元最终都没有顶部边框.
td{
border: 1px #000;
border-top: 0px;
width:30px;
height: 30px;
text-align: center;
border-style: solid;
}
tr:nth-child(1) td{
border-top: 1px;
}
td:nth-child(1){
border-right: 0px;
}
td:nth-child(3){
border-left: 0px;
}
table{
border-spacing: 0px;
border-collapse: separate;
}
我用Safari和Firefox测试了它.还请告诉我是否有更好的方法.
你没有上边框的原因td是因为你没有声明border-style或border-color...
tr:nth-child(1) td{
border-top: 1px;
}
应该...
tr:nth-child(1) td{
border-top: 1px solid #000;
}
你可以通过使用来大大简化这个 border-collapse: collapse
td{
border: 1px #000;
width:30px;
height: 30px;
text-align: center;
border-style: solid;
}
table{
border-collapse: collapse;
}<table>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>| 归档时间： |
|
| 查看次数： |
178 次 |
| 最近记录： |