Html 边界属性是否需要后代选择器?

Html 边界属性是否需要后代选择器?,html,css,border,Html,Css,Border,我刚开始自己学习HTML和CSS,掌握了一些基本规则,这变得越来越容易,但这一点我无法理解。我写这篇文章只是为了获得一个表和行的挂起,但是除非我使用 .city th { 但是背景属性和颜色即使仅使用 .city { 这是我写的基本代码,我想知道是否有一些简单的东西我错过了或者我没有正确理解 <head> <style> .even { background-color: blue; } .city th { border-top: 5px solid red;

我刚开始自己学习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>

.甚至{
背景颜色:蓝色;
}
.城市{
边框顶部:5px纯红;
边框左上半径:5px;
背景颜色:灰色;
颜色:白色;
}
诗歌工作坊
我们将举办一些诗歌研讨会和座谈会
一年四季

请注意,以下活动对会员免费:

  • 诗意的视角
  • 沃尔特·惠特曼在战争中
  • 发现诗与外来诗
纽约 芝加哥 旧金山 诗意的视角 2012年2月4日星期六上午11时至下午2时 2012年3月3日星期六上午11时至下午2时 2012年3月17日星期六上午11时至下午2时 沃尔特·惠特曼在战争中 2012年4月7日星期六上午11时至下午1时 2012年4月7日星期六上午11时至下午1时 2012年4月7日星期六上午11时至下午1时 创世诗与外来诗 2012年4月7日星期六上午11时至下午1时 2012年4月7日星期六上午11时至下午1时 2012年4月7日星期六上午11时至下午1时 自然死亡:一种探索 2012年4月7日星期六上午11时至下午1时 2012年4月7日星期六上午11时至下午1时 2012年4月7日星期六上午11时至下午1时
如果添加重置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;
    }

嗯,您不能为行指定
边框颜色,但:

您可以在tr元素上设置边框属性,但根据css2.1规范,这些属性在分隔边框模型中没有效果,而分隔边框模型往往是浏览器中的默认值。参考:17.6.1分离边界模型。(根据CSS 2.1,边框折叠的初始值是分开的,一些浏览器也将其设置为表的默认值。但最终的效果是,除非您明确指定折叠,否则几乎所有浏览器上都会有分开的边框。)

因此,您需要使用折叠边框。例如:

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

表{边框折叠:折叠;}
tr:n子(3){边界:实心薄;}
还要检查此解决方法


要了解更多细节,您可以阅读

边距,填充和边框不能应用于
tr
,因此您必须将其设置为childrenThanks。我一直被这些小事情所困扰,而清楚的解释会有所帮助。当然,但请记住,你不能给tr加上边界,而是给它加上td,这看起来就像你申请了tr。。