Hướng dẫn how do i style a single row in html? - làm cách nào để tạo kiểu cho một hàng trong html?

Tôi có một bảng trong HTML với "kiểu" lớp CSS. Làm thế nào lớp này nên được sử dụng để tạo kiểu cho một hàng hoặc cột cụ thể trong bảng?

Sau đây là mã HTML:

  

    

      
1
2
3
    
    

      
4
5
6
    
    

      
7
8
9
    
  

Tôi muốn tạo kiểu cho hàng đầu tiên một mình. Điều này có thể được thực hiện nếu chúng ta có một lớp cho thẻ TR đầu tiên. Nhưng làm thế nào để làm điều tương tự bằng cách sử dụng lớp "phong cách"?

hỏi ngày 9 tháng 7 năm 2020 lúc 17:12Jul 9, 2020 at 17:12

Bạn có thể thử bên dưới đoạn trích. Đây là lời giải thích của: nth-child ().
Here's the explanation of the :nth-child().

.style tbody>:nth-child(1) {
  background: red;
}

  

    

      
1
      
2
      
3
    
    

      
4
      
5
      
6
    
    

      
7
      
8
      
9
    
  

Đã trả lời ngày 9 tháng 7 năm 2020 lúc 17:32Jul 9, 2020 at 17:32

HV Sharmahv SharmaHV Sharma

4.6613 Huy hiệu vàng13 Huy hiệu bạc29 Huy hiệu đồng3 gold badges13 silver badges29 bronze badges

2

Bạn có thể sử dụng bộ chọn lớp giả được gọi là nth-child lấy tham số của số lượng vị trí của phần tử.

Sau đây là một ví dụ

.style {
  border: 1px solid olive;
  width: 100px;
}

.style tr:nth-child(1) {
  background: red;
}

.style tr:nth-child(2) {
  background: blue;
}

.style tr:nth-child(3) {
  background: green;
}

  

    
1
    
2
    
3
  
  

    
4
    
5
    
6
  
  

    
7
    
8
    
9
  

Hoặc bạn có thể sử dụng một bộ chọn lớp giả khác gọi là

.style tbody>:nth-child(1) {
  background: red;
}

Sau đây là một ví dụ

.style {
  border: 1px solid olive;
  width: 100px;
}

.style tr:nth-of-type(1) {
  background: red;
}

.style tr:nth-of-type(2) {
  background: blue;
}

.style tr:nth-of-type(3) {
  background: green;
}

Hoặc bạn có thể sử dụng một bộ chọn lớp giả khác gọi là 
.style tbody>:nth-child(1) {
  background: red;
}
0.
Và đây là một cách khác để sử dụng một tham số khác .style tbody>:nth-child(1) {
background: red;
}1 hoặc .style tbody>:nth-child(1) {
background: red;
}2 trên bộ chọn lớp giả.
Thí dụ
.style {
  border: 1px solid olive;
  width: 100px;
}

.style tr:nth-child(odd) {
  background: black;
}

.style tr:nth-child(even) {
  background: white;
}

  

    

      
1
      
2
      
3
    
    

      
4
      
5
      
6
    
    

      
7
      
8
      
9
    
  
Jul 9, 2020 at 17:30
 
 Đã trả lời ngày 9 tháng 7 năm 2020 lúc 17:30Umutambyi Gad
Umutambyi Gadumutambyi Gad3 gold badges16 silver badges36 bronze badges
4.0403 Huy hiệu vàng16 Huy hiệu bạc36 Huy hiệu đồng



Sử dụng CSS: Bộ chọn NTH-con ở đây là liên kết để tham khảo của bạn.
Ví dụ 
.style tbody>:nth-child(1) {
  background: red;
}
4Jul 9, 2020 at 17:19
 
 Đã trả lời ngày 9 tháng 7 năm 2020 lúc 17:19Shadow
Shadowshadow1 gold badge3 silver badges23 bronze badges
3
Đọc tiếp

  

    

      
1
      
2
      
3
    
    

      
4
      
5
      
6
    
    

      
7
      
8
      
9
    
  
 








programming
html
Table column style



Reply
3
0
 Chia sẻ