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

我在为GridView和DetailsView设置样式时遇到架构问题

我们的内部网服务器基本上是一个多应用程序网站。大多数报告和工具都使用网格结构，但由于它们执行的功能可能大不相同，因此格式会因网格和细节的不同而略有不同。我试着为每一个都制作一个专用的样式，但我遇到了继承问题。
例如：我想为一些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不正确，我应该怎么做呢？我确实尝试使用像#GVcaption这样的命名元素，但它应用于未命名的表，这破坏了站点上的其他内容（主导航栏）：（

我终于让它开始工作了。它还没有100%完成，还有一些类可能看起来很奇怪或重复，但我还有一些来自全局include的其他css。主要问题是，我必须在两个不同的表中针对相同的元素，但不同的是，为GridView呈现的表不会为细节视图

/*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;
}

/*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;
}