Question

我正在开发一个页面，其中的人员列表是随机排序的。该页面包含一系列包含带复选框名称的网格视图。当我单击复选框并单击“提交”按钮时，特定行应该是彩色的。我的问题是我无法覆盖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 =＆＃34; blue＆＃34; ）。我甚至尝试将css分配给该行中的单个单元格，但未观察到任何变化。我怎样才能做到这一点。

Answer 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 
}

Answer 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";
            }
        }
    }

Answer 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，因为在阅读代码或进一步更改/重构时可能会非常混乱。

如何使用c＃覆盖默认的css类

3 个答案: