如何使用CSS nth-child选择器自定义选中指定表格行？

Hey there! The problem with relying solely on nth-child is that it targets rows by their position in the table, not the actual content inside them. To highlight rows that contain AAA, BBB, or DDD in the "Name" column, here are two practical approaches:

1. Modern CSS with :has() Selector #

If you're targeting modern browsers (Chrome 105+, Firefox 121+, Safari 15.4+), you can use the :has() pseudo-class to check if a table row contains a <td> with your target text. This keeps everything in CSS without touching your existing HTML structure.

Update your <style> section like this:

table { text-align: center; border-collapse: collapse; width: 30%; } 
td, th { border: 1px solid grey; padding: 5px; } 
/* Keep your existing even row style if needed */
tr:nth-child(even) { background-color: lightgrey; } 

/* Highlight rows with AAA, BBB, DDD */
tr:has(td:nth-child(2):is(:contains('AAA'), :contains('BBB'), :contains('DDD'))) {
    background-color: #f0e68c; /* Change to your desired highlight color */
}

Note: The :contains() pseudo-class works in most modern browsers, but if you need support for older versions, the JavaScript method below is a safer bet.

2. JavaScript Approach (Full Browser Compatibility) #

For broader support (including older browsers like IE), use JavaScript to loop through table rows, check the "Name" column content, and apply a background color to matching rows.

Add this script right before the closing </body> tag:

<script>
// Get all table rows except the header row
const rows = document.querySelectorAll('table tr:not(:first-child)');

rows.forEach(row => {
    // Grab the second <td> (which holds the Name value)
    const nameCell = row.querySelector('td:nth-child(2)');
    // Check if the cell text matches any of our target values
    if (nameCell && ['AAA', 'BBB', 'DDD'].includes(nameCell.textContent.trim())) {
        row.style.backgroundColor = '#f0e68c'; // Set your preferred highlight color
    }
});
</script>

Full Updated Code #

Here's your complete HTML with the JavaScript method included (works in all browsers):

<!DOCTYPE html> 
<html> 
<head> 
<style> 
table { text-align: center; border-collapse: collapse; width: 30%; } 
td, th { border: 1px solid grey; padding: 5px; } 
tr:nth-child(even) { background-color: lightgrey; } 
</style> 
</head> 
<body> 
<table> 
<tr> 
<th>Date</th> 
<th>Name</th> 
<th>Marks</th> 
</tr> 
<tr> 
<td>20-08-2021</td> 
<td>AAA</td> 
<td>000</td> 
</tr> 
<tr> 
<td>20-08-2021</td> 
<td>BBB</td> 
<td>000</td> 
</tr> 
<tr> 
<td>20-08-2021</td> 
<td>CCC</td> 
<td>000</td> 
</tr> 
<tr> 
<td>20-08-2021</td> 
<td>DDD</td> 
<td>000</td> 
</tr> 
<tr> 
<td>20-08-2021</td> 
<td>EEE</td> 
<td>000</td> 
</tr> 
<tr> 
<td>20-08-2021</td> 
<td>FFF</td> 
<td>000</td> 
</tr> 
<tr> 
<td>20-08-2021</td> 
<td>GGG</td> 
<td>000</td> 
</tr> 
</table>

<script>
const rows = document.querySelectorAll('table tr:not(:first-child)');
rows.forEach(row => {
    const nameCell = row.querySelector('td:nth-child(2)');
    if (nameCell && ['AAA', 'BBB', 'DDD'].includes(nameCell.textContent.trim())) {
        row.style.backgroundColor = '#f0e68c';
    }
});
</script>
</body> 
</html>

Both methods will highlight exactly the rows you need—pick the one that fits your browser support requirements!

内容的提问来源于stack exchange，提问作者pr0grammar