带有 asp.net gridview 的选择器 <tr> 的 css 样式答案

【问题标题】：css style for selector <tr> with asp.net gridview带有 asp.net gridview 的选择器 <tr> 的 css 样式
【发布时间】：2014-03-24 22:09:06
【问题描述】：

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

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

.tr {
    margin-bottom: 5px;
}

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

那么，问题出在哪里？

【问题讨论】：

【解决方案1】：

您已经创建了一个名为“tr”的 class 选择器，通过在标签前面加上句点，因此您的目标不是元素本身，而是带有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;
}

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

【讨论】：

【解决方案2】：

你有什么：

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

你需要什么：

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

【讨论】：