Question

我只想看到第一个th中的tr，但第二个th中的tr消失了。你知道如何修复代码，所以第一个th包含＆＃34; Min。＆＃34;当介质宽度小于640px时，可以显示文本吗？先感谢您！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->

<style type="text/css">

    @media only screen and (max-width: 800px) {
        #unseen table th div {display: none;},
    } 
    @media only screen and (max-width: 640px) {
        #unseen table th:nth-child(1),
        #unseen table th:nth-child(6),
        #unseen table th:nth-child(7),
        #unseen table th:nth-child(8){display:none;},
    </style>

    <body>
        <section id="unseen">    
            <table class="table-bordered table-striped table-condensed productForm" width="100%" cellspacing="0px">
                <thead>
                    <tr style="border:solid 1px #FFFFFF;">
                        <th rowspan="2">Photo</th>
                        <th rowspan="2">Part Number<div>/ Description</div> </th>
                        <th rowspan="2">Color <div>/ nm</div></th>
                        <th colspan="3">Luminous Intensity</th>
                        <th rowspan="2">Viewing<br />Angle</th>
                        <th rowspan="2">Data<br />Sheet</th>
                        <th rowspan="2" colspan="2">3D Spec<sup>†</sup></th>
                        <th rowspan="2">Request<br />for Quote</th>
                    </tr>
                    <tr>
                        <th>Min.</th>
                        <th>Typ.</th>
                        <th>Unit</th>
                    </tr>
                </thead>
            </table>
        </section>
    </body>    
    </html>

Answer 1

您可以使用:first-child选择器。看到这个小提琴http://jsfiddle.net/s281dopc/

#unseen table tr:first-child th:nth-child(1),
#unseen table tr:first-child th:nth-child(6),
#unseen table tr:first-child th:nth-child(7),
#unseen table tr:first-child th:nth-child(8) {
    display:none;
}

Answer 2

您正试图首先选择tr的孩子，

因此请先使用nth child, first-child选择tr。然后抓住th

在CSS #unseen style

2 个答案: