CSS lồng nhau nth-child() đang hoạt động lạ

Tôi đang cố gắng tạo lưới 3x3 đơn giản (sử dụng <table>) với tất cả các ô có đường viền 1px. Nếu tôi chỉ sử dụng CSS để cung cấp cho tất cả các thành phần <td> một đường viền 1px thì đường viền bên trong sẽ chồng lên nhau và tạo ra biên giới 2px để tôi xử lý từng khác nhau <td>. Tôi đã thành công trong việc làm theo cách đó và đã sử dụng con số nth để giảm CSS. Tuy nhiên, câu hỏi của tôi là tại sao một cách hợp lý nhất định sử dụng bộ chọn CSS thậm chí ít hơn không hoạt động.CSS lồng nhau nth-child() đang hoạt động lạ

Đây là HTML của tôi

<!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>

Đây là CSS mà hoạt động:

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; 
}

Đây là CSS mà sử dụng một selector ít hơn và nên làm việc nhưng không hiểu sao tất cả các tế bào trên kết thúc với không đường viền trên cùng.

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; 
}

Tôi đã thử nghiệm với cả Safari và Firefox. Ngoài ra xin vui lòng cho tôi biết nếu có một cách tốt hơn để làm điều đó.

Nguồn

2015-10-02 Mazen

Lý do bạn không có biên giới hàng đầu trên td của bạn là bởi vì bạn không khai báo một border-style hoặc border-color ...

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

nên ...

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

Bạn có thể đơn giản hóa điều này rất nhiều bằng cách chỉ sử dụng 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>

Nguồn

2015-10-02 12:05:05 Turnip

Tôi không biết tại sao, nhưng td 's ở hàng đầu tiên đã thay đổi từ rắn không ai sánh kịp. Thử sử dụng:

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

bằng CSS và phải phù hợp. http://jsfiddle.net/u1d1ctcy/

Nguồn

2015-10-02 12:30:40

Bạn chỉ có thể làm điều đó bằng cách chỉ mã bên dưới:

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

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

Nguồn

2015-10-16 17:56:11

CSS lồng nhau nth-child() đang hoạt động lạ

Trả lời

Các vấn đề liên quan