如何使用 c# 覆盖默认的 css 类答案

【问题标题】：How to override the default css class using c#如何使用 c# 覆盖默认的 css 类
【发布时间】：2014-12-17 07:42:09
【问题描述】：

我正在开发一个页面，其中的人员列表是随机排序的。该页面由一系列网格视图组成，其中包含带有复选框的名称。当我单击复选框并单击提交按钮时，特定行应该是彩色的。我的问题是我无法覆盖 gridviews 的 css。

这是gridview css：

.GridCss
{
    margin: 0px;
    padding: 0px;
    width: 260px;
    height:700px;
    box-shadow: 10px 10px 5px #888888;
    border: 1px solid #ffffff;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    border-bottom-left-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    -webkit-border-bottom-right-radius: 0px;
    border-bottom-right-radius: 0px;
    -moz-border-radius-topright: 0px;
    -webkit-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    border-top-left-radius: 0px;
}
.GridCss table
{
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.GridCss tr:last-child td:last-child
{
    -moz-border-radius-bottomright: 0px;
    -webkit-border-bottom-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.GridCss table tr:first-child td:first-child
{
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    border-top-left-radius: 0px;
}
.GridCss table tr:first-child td:last-child
{
    -moz-border-radius-topright: 0px;
    -webkit-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
}
.GridCss tr:last-child td:first-child
{
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.GridCss tr:hover td
{
    background-color: #e5e5e5;
}
.GridCss th
{
    vertical-align: middle;
    background: -o-linear-gradient(bottom, #ffffff 5%, #e5e5e5 100%);
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #e5e5e5) );
    background: -moz-linear-gradient( center top, #ffffff 5%, #e5e5e5 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e5e5e5");
    background: -o-linear-gradient(top,#ffffff,e5e5e5);
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-width: 0px 1px 1px 0px;
    text-align: left;
    padding: 7px;
    font-size: 14px;
    font-family: Arial;
    font-weight: normal;
    color: #000000;
}
.GridCss td
{
    vertical-align: middle;
    background: -o-linear-gradient(bottom, #ffffff 5%, #e5e5e5 100%);
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #e5e5e5) );
    background: -moz-linear-gradient( center top, #ffffff 5%, #e5e5e5 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e5e5e5");
    background: -o-linear-gradient(top,#ffffff,e5e5e5);
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-width: 0px 1px 1px 0px;
    text-align: left;
    padding: 7px;
    font-size: 12px;
    font-family: Arial;
    font-weight: normal;
    color: #000000;
}
.GridCss tr:last-child td
{
    border-width: 0px 1px 0px 0px;
}
.GridCss tr td:last-child
{
    border-width: 0px 0px 1px 0px;
}
.GridCss tr:last-child td:last-child
{
    border-width: 0px 0px 0px 0px;
}
.GridCss tr:first-child td
{
    background: -o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
    background: -moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");
    background: -o-linear-gradient(top,#cccccc,b2b2b2);
    background-color: #cccccc;
    border: 0px solid #ffffff;
    text-align: center;
    border-width: 0px 0px 1px 1px;
    font-size: 14px;
    font-family: Arial;
    font-weight: bold;
    color: #000000;
}
.GridCss tr:first-child:hover td
{
    background: -o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
    background: -moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");
    background: -o-linear-gradient(top,#cccccc,b2b2b2);
    background-color: #cccccc;
}
.GridCss tr:first-child td:first-child
{
    border-width: 0px 0px 1px 0px;
}
.GridCss tr:first-child td:last-child
{
    border-width: 0px 0px 1px 1px;
}

我正在通过 c# 将 css 类应用于选定的行

row.CssClass = "blue";

蓝色 css 类在哪里（我只是通过更改 .GridCss td 中的背景创建的）

.blue 
{     
vertical-align: middle;
background: -o-linear-gradient(bottom, #ffffff 5%, #e5e5e5 100%);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8880C5), color-stop(1, #3C49AB) );
background: -moz-linear-gradient( center top, #ffffff 5%, #e5e5e5 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e5e5e5");
background: -o-linear-gradient(top,#ffffff,e5e5e5);
background-color: #ffffff;
border: 1px solid #ffffff;
border-width: 0px 1px 1px 0px;
text-align: left;
padding: 7px;
font-size: 12px;
font-family: Arial;
font-weight: normal;
color: #FFF;
}

按钮点击事件代码：

 protected void btnSubmit_Click(object sender, EventArgs e)
        {
            GridView[] _grdArray = { GridView1, GridView2, GridView3, GridView4, GridView5 };
            foreach (GridView gridview in _grdArray)
            {
                foreach (GridViewRow row in gridview.Rows)
                {
                    if (row.RowType == DataControlRowType.DataRow)
                    {
                        CheckBox chkRow = (row.Cells[0].FindControl("chkCtrl") as CheckBox);
                        if (chkRow != null && chkRow.Checked)
                        {
                           row.CssClass = "blue";
                        }
                    }
                }
            }           
        }

但它只显示原始样式。当我通过浏览器检查特定行时，已分配了蓝色类（tr class="blue"）。我什至尝试将 css 分配给行中的单个单元格，但没有观察到任何变化。我怎样才能做到这一点。

【问题讨论】：

如果没有实时代码，真的无法判断这里发生了什么。
我已经添加了完整的css
仍然更喜欢实时代码，这样我们就可以看到类和样式是如何启动的。但是，如果您坚持在这里发布所有内容而无需使用小提琴或 livecode，至少添加您的 HTML 输出。
请提供该网格的 html 输出

标签： c# css asp.net gridview

【解决方案1】：

在 css 类中尝试!important

.blue 
{     
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8880C5), color-stop(1, #3C49AB) ) !important;
   //same as .GridCss 
}

【讨论】：

尽可能避免使用 !important。它使代码的可读性和可调整性变得更加困难。
这个方法终于奏效了。保持！对每个属性都很重要。没有其他方法有效

【解决方案2】：

或者你可以这样做：

将 RowDataBound 事件添加到您的 GridView，然后

protected void gvDocsVerPrev_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        //Get data row view
        DataRowView drview = e.Row.DataItem as DataRowView;
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            CheckBox chkbox= e.Row.FindControl("chkbox") as CheckBox ;
            if (chkbox.Selected)
            {
                e.Row.CssClass = "blue";
            }
        }
    }

【讨论】：

如果我这样做没有任何变化
为什么，有什么问题？
问题出在 CSS 上。除非我在课堂上给出 !important ，否则它没有任何效果。

【解决方案3】：

请检查https://stackoverflow.com/tags/css/info 中的选择器优先级部分。

您的定义的优先级低于.GridCss tr，要解决此问题，您至少应使用tr.blue：

tr.blue 
{     
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8880C5), color-stop(1, #3C49AB) );
   //same as .GridCss 
}

此外，我不喜欢使用!important，因为它在阅读代码或进一步更改/重构时会非常混乱。

【讨论】：