Question

我刚开始自己学习HTML和CSS并掌握了一般规则并且它变得更容易但是这个我无法解决这个问题。我写这个只是为了得到一个表和行的挂起但是除非我使用

，否则不会应用border属性

.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>

Answer 1

嗯，你不能给border-color排，但是：

您可以在tr元素上设置border属性，但是根据CSS 2.1规范，这些属性在分离的边框模型中没有任何效果，这在浏览器中往往是默认的。参考：17.6.1分离的边界模型。（根据CSS 2.1，border-collapse的初始值是分开的，有些浏览器也将它设置为table的默认值。无论如何，除非你明确指定崩溃，否则几乎所有浏览器都会分开边框。）

Reference

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

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

另请检查此解决方法Demo

Ref For this jsfiddle

更多细节，您可以阅读Here

Answer 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;
    }

边境物业需要后代选择器吗？

2 个答案: