【发布时间】：2025-11-25 18:20:06
【问题描述】：
我在为 gridviews 和 detailsviews 设置样式时遇到了架构问题。
我们的 Intranet 服务器基本上是一个多应用网站。大多数报告和工具都使用网格结构，但由于它们可能执行截然不同的功能，因此格式因网格和细节而略有不同。我尝试为每个样式制作专用样式，但遇到了继承问题。
例如：我想要一些 Gridview 的额外标题栏。
Gridview 是这样设置的：
<asp:GridView
ID="GridView_Links"
runat="server"
DataSourceID="SqlDataSource1"
AutoGenerateColumns="False"
DataKeyNames="link_key"
AllowSorting="True"
CssClass="GridView"
GridLines="Vertical"
EnableModelValidation="True"
Caption='<table CssClass="GVcaption" ><tr><td>Link Manager</td></tr></table>'
CaptionAlign="Top"
OnRowCommand="GridView_Links_RowCommand">
<FooterStyle CssClass="GridView-Footer" />
<HeaderStyle CssClass="GridView-Header" />
<AlternatingRowStyle CssClass="GridView-AlternateRow" />
<RowStyle CssClass="GridView-Row" />
<SelectedRowStyle CssClass="GridView-SelectedRow" />
</asp:GridView>
详细信息视图的引用方式与 css 相同。 发生的情况是 Caption 表没有应用 GVcaption，而是应用了 .DetailsView-CommandRow a, tr:nth-child(1)。
这是它的 css。
/*Gridview*/
.GridView {
border-bottom: solid 3px #335e77;
border-left: solid 3px #335e77;
border-right: solid 3px #335e77;
border-top: solid 1px white;
background-color: transparent;
text-align: center;
-moz-box-shadow: 5px 5px 1px #5A6266;
-webkit-box-shadow: 5px 5px 1px #5A6266;
box-shadow: 5px 10px 10px #5A6266;
}
.GVcaption table {
text-align: center;
padding: 5px 10px 5px 10px;
border-collapse: collapse;
border-bottom-color: white;
border-right-color: #335e77;
border-bottom: solid 3px #335e77;
border-left: solid 3px #335e77;
width: 100%;
}
.GridView table {
align-content:center;
text-align:center;
padding: 5px 10px 5px 10px;
border: solid 1px white;
border-collapse: collapse;
border-bottom-color: white;
border-right-color:#335e77;
width:100%;
}
.GridView-Header a, th {
font-weight: bold;
font-size: medium;
color: white;
text-align: center;
align-content: center;
align-items: center;
padding: 3px;
border-top-color: white;
}
.GridView-Header tr:nth-column(0) {
text-align: center;
font-weight: bold;
font-size: large;
color: white;
text-decoration: underline;
}
GridView-Header td {
background-color: #335E77;
font-weight: bold;
font-size: larger;
color: white;
text-align: center;
border-color: white;}
.GridView-Row tr td {
background-color: #EEEEEE;
color: black;
padding-left: 30px;
width: auto;
border-right: solid 1px white;
}
.GridView body {
font-family: sans-serif;
color: #666;
font-size: 12px;
line-height: 12px;
background-color: white;
padding: 3px;
}
.GridView-SelectedRow tr {
background-color: #00ff90;
font-weight: bold;
color: white;
align-content: center;
}
.GridView-AlternatingRow tr {
background-color: #DCDCDC;
}
.GridView-Footer tr {
background-color: #335E77;
color: black;
align-content: center;
}
.GridView-Pager {
background-color: #335E77;
font-weight: bold;
border: solid;
color: black;
align-content: center;
}
/*DetailsView*/
.DetailsView {
padding: 3px;
border: solid #335e77;
background-color: transparent;
text-align: left;
-moz-box-shadow: 5px 5px 1px #5A6266;
-webkit-box-shadow: 5px 5px 1px #5A6266;
box-shadow: 5px 10px 10px #5A6266;
}
.DetailsView-Header td, td:nth-child(0) {
background-color: #335E77;
font-weight: bold;
font-size: larger;
color: white;
text-align: center;
border-color: white;
}
.DetailsView-Footer td, td:nth-child(0) {
background-color: #335E77;
font-weight: bold;
font-size: larger;
color: white;
text-align: center;
}
.DetailsView tbody {
padding: 3px;
background-color: whitesmoke;
text-align: left;
}
.DetailsView-CommandRow a, tr:nth-child(1) {
background: #335E77;
font-weight: bold;
border: solid 1px black;
color: white;
text-align: left;
}
/*.DetailsView-Row tr {
background-color: #DCDCDC;
font-weight: bold;
font-size: larger;
color: pink;
text-align: left;
}*/
.DetailsView-FieldHeader {
padding: 2px 5px;
background-color: #335E77;
border-color: white;
font-weight: bold;
font-size: larger;
color: white;
text-align: left;
width: auto;
}
.DetailsView tr:nth-child(odd) {
background-color: #DCDCDC;
}
如果我设置的 css 不正确，我应该怎么做？我确实尝试使用像#GVcaption 这样的命名元素，但它适用于未命名的表格，这破坏了网站上的其他内容（主导航栏）:(
【问题讨论】：