GridView 中的表正在使用 DetailsView 控件中的 CSS

Question

我在为网格视图和详细信息视图设置样式时遇到架构问题。

我们的内联网服务器基本上是一个多应用程序网站。大多数报表和工具都使用网格结构，但由于它们可能执行截然不同的功能，因此格式因网格和详细信息而异。 我试图为每个风格制作专用样式，但我遇到了继承问题。
例如：我想要一些网格视图的额外标题栏。 网格视图的设置如下：

<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 相同。 发生的情况是标题表没有应用 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 这样的命名元素，但它适用于未命名的表，这会破坏站点(主导航栏)上的其他内容:(

Answer 1

我终于让它工作了。它不是 100% 完成的，有一些类可能看起来很奇怪或重复，但我还有一些来自全局包含的其他 css。主要问题是我必须在 2 个不同的表中定位相同的元素，但不同之处在于为 GridView 呈现的表格与 DetailsView 呈现的元素不同。

/*Gridview*/

.GridView {
text-align: center;
-moz-box-shadow: 5px 5px 1px #5A6266;
-webkit-box-shadow: 5px 5px 1px #5A6266;
box-shadow: 5px 10px 10px #5A6266;
align-content:center;
}
.GridView-Header a:hover {
background-color: white;
color: #335e77;
}
table.Gridvieww-Row tbody, tr:nth-child(odd) {
background-color: lightgray;
font-weight: 400;
border-left: 3px;
border-right: 0px;
align-content: center;
}
table.Gridvieww-Row tbody, tr:nth-child(even) {
background-color: #EEEEEE;
font-weight: 400;
border-left: 3px;
border-right:0px;
align-content:center;
}
table.GridView-Row tbody, tr, td {
width: auto;
align-content:center;    
}
.GridView-Header a{
font-weight: bold;
color:white;
}
.GridView-Header th:last-child {
border-right-color: #335e77;
}
.GridView-Header th:first-child {
border-left-color: #335e77;
}
.GridView-Header th, tr:nth-child(0) {
padding: 5px 10px 5px 10px;
font-weight: bold;
font-size: 16px;
line-height: 16px;
color: white;
text-align: center;
align-content: center;
align-items: center;
border-collapse: collapse;
border-right-color: white;
border-top-color: white;
border-bottom-color: white;
background-color: #335e77;
transition: none;
}
.GridView-Header tbody tr   { 
background-color: #335E77;
font-weight: bold;
font-size: larger;
color: white;
text-align: center;
border-color: white;}
tr.GridView-Row tr, td:last-child, a {
font-size: 15px;
line-height: 15px;
color: black;
text-align: center;
align-content: center;
align-items: center;
border-collapse: collapse;
transition: none;
}
table.Gridvieww-Row tr:nth-child(even), a:hover {
background-color: #335e77;
color: white;
font-weight:bold;
}
.GridView tbody {
font-family: sans-serif;
color: #666;
font-size: 12px;
line-height: 12px;
background-color: inherit;
padding: 3px;
}
.GridView-SelectedRow tr {
background-color: #00ff90;
font-weight: bold;
color: black;
align-content: center;
}
.GridView-AlternatingRow tr:nth-child(odd) {
background-color: deeppink;
}
.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;
}
.GridView textarea, input[type=checkbox] {
width: 20px;
padding: 5px;
}
#GVcaption {
border-collapse: collapse;
width: 100%;
}
#GVcaption tbody tr td {
text-align: center;
border-collapse: collapse;
width: 100%;
font-size: 16px !important;
border-right: solid 3px #335e77;
border-bottom: solid 1px white;
border-left: solid 1px #335e77;
border-right: solid 3px #335e77;
border-top: solid 3px #335e77;
font-size: 18px !important;
padding: 5px 10px 5px 10px;
text-align: center;
border-collapse: collapse;
color: white;
font-weight: bold;
background: #335e77;
}

/*DetailsView*/
table.DetailsView  {
border: solid #335e77;
background-color: transparent;
-moz-box-shadow: 5px 5px 1px #5A6266;
-webkit-box-shadow: 5px 5px 1px #5A6266;
box-shadow: 5px 10px 10px #5A6266;
align-content: center;
color: white;
width: auto;
}
tr.DetailsView-Row td {
padding: 5px 5px;
border-collapse:collapse;
}
.DetailsView-Header td, td:nth-child(0) {
padding: 3px;
background-color: #335E77;
font-weight: bold;
font-size: larger;
color: white;
text-align: center;
border-top-color: #335e77;
border-left-color: #335e77;
border-bottom-color: white;
border-right: 0px;
border-collapse: collapse;
}
.DetailsView-Footer  td {
background-color: #335E77;
font-weight: bold;
font-size: larger;
color: white;
text-align: center;
}
.DetailsView-FieldHeader {
padding: 5px 5px;
background-color: #335E77;
border-color: white;
font-weight: bold;
font-size: larger;
color: white;
text-align: left;
}
.DetailsView tr:nth-child(odd) {
background-color: #DCDCDC;    
}
DetailsView-Footer td, tr:last-child {
border-top-color: black;
border-bottom-color: white;
}

.DetailsView textarea, input[type=text] {
width: 400px;
padding: 5px;
}