CSSのネストされたnth-child（）が変わっています

私は1pxボーダーを持つすべてのセルで、単純な3x3グリッド（<table>を使用）を作成しようとしています。私が単純にCSSを使用して<td>の要素をすべて1pxのボーダーにすると、内側のボーダーはスタックして2pxのボーダーを作成するので、それぞれ<td>を別々に扱います。私はそのようにして成功し、nth子を使ってCSSを減らしました。しかし、私の疑問は、より少ないCSSセレクタを使用する特定の論理的な方法が機能しない理由です。CSSのネストされたnth-child（）が変わっています

ここに私の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の両方でテストしました。また、より良い方法があるかどうか教えてください。

出典

2015-10-02 Mazen

あなたがする必要がありますborder-styleまたはborder-color ...

tr:nth-child(1) td{ 
    border-top: 1px; 
}

を宣言されていないので、あなたがあなたのtd年代には上の境界を持っていない理由は...

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>

このように大幅に簡略化できます

出典

2015-10-02 12:05:05 Turnip

私は理由を知りませんが、最初の行のtd年代には誰にも負けない固体から変更されています。次のコードを試してみてください。

tr:nth-child(1) td{ 
    border-top: solid black 1px; 
}

（CSSは正しい） http://jsfiddle.net/u1d1ctcy/

出典

2015-10-02 12:30:40

あなたは単にそのコードの下からのみ行うことができます。

<style> 
    table { 
     border-collapse: collapse; 
      } 

    table, td, th { 
     border: 1px solid black; 
     } 
</style>

出典

2015-10-16 17:56:11

CSSのネストされたnth-child（）が変わっています

答えて

関連する問題