给TreeView的HoverNodeStyle的 SelectedNodeStyle赋值selectedNode,
给TreeView的NodeStyle的 CssClass赋值node
代码如下:
<asp:TreeView ID="tvOU" runat="server" OnSelectedNodeChanged="tvOU_SelectedNodeChanged">
<SelectedNodeStyle CssClass="selectedNode" />
<NodeStyle CssClass="node" />
</asp:TreeView>
在一个CSS文件中定义selectedNode和node
.selectedNode
{
color: rgb(252,164,30);
}
.node
{
color: Black;
}
从上面的CSS代码可看出,selectedNode和node的区别只是颜色的区别,这时预览页面,选中一个Node,但并没有出现selectedNode中指定的颜色,问题出现哪里呢?
查看下HTML原文件,发现teeView中的Node的class的定义如下:
class="ctl00_ContentPlaceHolder2_tvOU_0 node ctl00_ContentPlaceHolder2_tvOU_1 selectedNode
即selectedNode在node之后,但CSS的优先选择和class中定义的顺序是无关的,而是和在CSS文件中定义的顺序有关
把上面的CSS定义调整下顺序
.node
{
color: Black;
}
.selectedNode
{
color: rgb(252,164,30);
}
预览页面,选中一个Node,问题解决
这是因为浏览器在选择CSS的定义时,如果两个规则中定义了同一种规则的话,最后出现的定义会覆盖上一个定义,同时,这也就是为什么在引用CSS文件时,先引用通用的CSS文件,再引用特的CSS文件的原因,比如
<link href="../css/common.css" rel="stylesheet" type="text/css" />
<link href="../css/mypage.css" rel="stylesheet" type="text/css" />