我正在开发一个页面，其中的人员列表是随机排序的。该页面由一系列包含名称和复选框的 GridView 组成。当我单击复选框并单击提交按钮时，特定行应该是彩色的。我的问题是我无法覆盖 GridView 的 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 类中尝试 !important
.blue
{
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8880C5), color-stop(1, #3C49AB) ) !important;
//same as .GridCss
}
关于c# - 如何使用 C# 覆盖默认的 css 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27520486/