需要 CSS #unseen 风格的帮助

Question

我只喜欢看不到第一个 tr 中的 th，但第二个 tr 中的 th 消失了。您知道如何修复代码以便在媒体宽度小于 640 像素时可以显示包含 "Min." 文本的第一个 th 吗？先感谢您！

<!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 选择器。看到这个 fiddle 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

您正在尝试先 select tr 的 child，

所以先用 nth child, first-child 到 select tr。然后得到 th

需要 CSS #unseen 风格的帮助

Need help in the CSS #unseen style

css

visibility

twitter-bootstrap