hiding nth child tr | 易学教程

问题

Apologize for the length of the code. I'm trying to hide the three cells that contain the $ I can't change the html but I can change the CSS. I've tried:

.extra-details table:nth-child(1) tr:nth-child(-n+4)

but that gets the first 4 rows in the second table as well. So my question is this, is there CSS I can use to hide the cell/rows that have the $ or suggestions on something to search for? cell values have been removed for brevity.

<div class="details_column">
    <div class="column">
        <table cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                       Price
                    </td>
                    <td class="medium ">
                        $
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                        $
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                        $
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="column">
        <table cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

回答1:

In a single line the CSS to select just the <td> containing $ elements would be:

div.column:first-child table tr:nth-child(-n+4):not(:nth-child(1)) td:last-child {
    border:2px dashed red;
}

as demonstrated in this fiddle. However, please note that this is only tested in Chrome.

回答2:

To select a specific first occurrence of an element, use :first-of-type instead of :first-child. With the given structure, the following selector can be used to achieve your goal:

.details_column > *:first-of-type table tr:nth-child(2) td,
.details_column > *:first-of-type table tr:nth-child(3) td,
.details_column > *:first-of-type table tr:nth-child(4) td {
    background:red;
}

Fiddle: http://jsfiddle.net/BaUYF/

Explanation of CSS:

Select any element with class details_column
Select the any element which is a first typem and contains a <table> child.
Select the 2nd, 3rd and 4th row. of these tables.
Select all cells in these rows
Apply a style

Note: The proposed selectors could be adjusted to match your exact wishes. I haven't used it, but the :not() selector could also be useful.

来源：https://stackoverflow.com/questions/8197432/hiding-nth-child-tr

标签

html

css