用asp.net gridview选择器的css样式

Question

我有一个用ASP.NET GridView生成的表，我必须在每个<tr>之间放一些空格。

在我的CSS文件中，我有<tr>选择器的说明：

.tr {
    margin-bottom: 5px;
}

但是，在浏览器中使用开发人员工具，我发现<tr>的样式不是来自我的CSS文件，但是它有“用户定义的样式表”，我无法更改margin-bottom甚至在浏览器开发者工具中也是如此。

那么，问题是什么？

Answer 1

您已经通过在标记前加上句点来创建名为“tr”的类选择器，因此您不是要定位元素本身，而是定位class="tr"的任何元素。尝试删除.：

tr {
    margin-bottom: 5px;
}

请注意，您可能不希望影响网站中的每个<tr>。也许您在GridView（<asp:GridView CssClass="fatrows" />）上指定了一个特殊类，然后使用稍微更具体的CSS定位其行：

table.fatrows tr {
    margin-bottom: 5px;
}

或者通过在其行项上指定一个特殊的CSS类来坚持GridView约定：

<asp:GridView>
    <RowStyle CssClass="fatrows" />
</asp:GridView>

并自行定位行：

tr.fatrows {
    margin-bottom: 5px;
}

显然你会想要一个更有意义的类名......

Answer 2

你有什么：

.tr /* incorrectly targets elements with the class "tr" */ { 
    margin-bottom: 5px;
}

你需要什么：

tr /* targets elements of type TR */ { 
    margin-bottom: 5px;
}