如何将以下cs更改为一个CSS CLASS

时间:2011-02-02 18:41:50

标签: css linkbutton

ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}

a:link,a:visited
{
    display:block;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}

a:hover,a:active
{
    background-color:#7A991A;
}

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_advanced

原因

  • 我想将上述样式应用于链接按钮,是由浏览器希望的ID更改(这是一种要求所以无法在链接按钮上保持选择“id”

    • 所以我可以将上面的内容转换为css类,然后将其分配给一个链接按钮,保持原样访问的悬停活动样式吗?

真实原因

  • 左侧的ul-li-linkbutton(导航栏结构)必须根据css样式进行更改
  • 绝对不能将ul-li-link按钮放到顶部。

如何实现这一目标?

2 个答案:

答案 0 :(得分:1)

在上面的代码中,您将不同的样式应用于不同的元素。如果将所有样式应用于所有元素,则可以组合类的唯一方法。如果你需要混合和匹配,你必须有单独的类。

尽管如此,你可以移动a:链接的大多数,a:访问ul类定义中的规则。

答案 1 :(得分:0)

    <ul id="one_ul">
<li>
    <asp:LinkButton ID="LinkButton1" runat="server" 
        onclick="LEFT_LINKBUTTON_CLICKED" CssClass="on_li">Products</asp:LinkButton>
        </li>

        <li>
    <asp:LinkButton ID="LinkButton2" runat="server" 
        onclick="LEFT_LINKBUTTON_CLICKED" CssClass="on_li">Upload a File</asp:LinkButton>
        </li>
</ul>

CSS

body {
}

#one_ul
{
list-style-type:none;
margin:0;
padding:0;

}

.on_li:link, .on_li:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

.on_li:hover, .on_li:active
{
background-color:#7A991A;
}