需要边框属性的后代选择器？答案

【问题标题】：Need for descendant selectors on border property?需要边框属性的后代选择器？
【发布时间】：2015-12-02 14:42:23
【问题描述】：

我刚开始自学 HTML 和 CSS，掌握了一些通用规则，它变得越来越容易，但我无法理解这一点。我写这个只是为了了解表格和行，但除非我使用，否则不应用边框属性

.city th {

但即使只使用了背景属性和颜色

.city {

这是我编写的基本代码，我想知道是否有一些我遗漏的简单内容或我没有正确理解的内容。

<head>
<style>
.even {
background-color: blue;
}
.city th {  
border-top: 5px solid red;
border-top-left-radius: 5px;
background-color: gray;
color: white;
}
</style>
</head>
<body>
<h1>Poetry Workshops</h1>
<p>We will be conducting a number of poetry workshops and symposiums
        throughout the year.</p>
<p>Please note that the following events are free to members:</p>
<div class="list">
<ul>
    <li>A poetic Perspective</li>
    <li>Walt WHitman at War</li>
    <li>Found Poems and Outsider Poetry</li>
</ul>
</div>
<table>
<tr class="city">
    <th></th>
    <th>New York</th>
    <th>Chicago</th>
    <th>San Francisco</th>
</tr>
<tr>
    <td>A poetic perspective</td>
    <td>Sat, 4 Feb 2012 11am - 2pm</td>
    <td>Sat, 3 Mar 2012 11am - 2pm</td>
    <td>Sat, 17 Mar 2012 11am - 2pm</td>
</tr>
<tr class="even">
    <td>Walt Whitman at War </td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
</tr>
<tr>
    <td>Found Poems & Outsider Poetry</td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
</tr>
<tr class="even">
    <td>Natural Death: An Exploration</td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
</tr>
</table>

【问题讨论】：

margin, padding & border 不能申请tr，所以你必须给它设置样式
谢谢。我一直卡在这些小事情上，而明确的解释会有所帮助。

标签： html css border

【解决方案1】：

好吧，你不能给 border-color 行但是：

您可以在 tr 元素上设置边框属性，但根据 CSS 2.1 规范，此类属性在分离边框模型中不起作用，这往往是浏览器中的默认设置。参考：17.6.1 分离边界模型。（border-collapse 的初始值根据 CSS 2.1 是分开的，一些浏览器也将其设置为 table 的默认值。无论如何，最终效果是您在几乎所有浏览器上都会获得分开的边框，除非您明确指定 collapse。）

Reference

因此，您需要使用折叠边框。示例：

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>

同时检查这个解决方法Demo

Ref For this jsfiddle

更多详情，可以阅读Here

【讨论】：

当然，但请记住，您不能为 tr 提供边框，而是提供它的 td，它看起来就像您申请了 tr..

【解决方案2】：

如果您添加重置 css，一切都会完美运行。

 html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

【讨论】：