Как я могу изменить следующие CS в один CSS-класс - PullRequest
Новая
       5

Как я могу изменить следующие CS в один CSS-класс

0 голосов
/ 02 февраля 2011 
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-link (структура панели навигации) слева должна меняться в соответствии со стилем CSS
  • кнопка ul-li-link для верхней части не должна.

как это сделать?

Ответы [ 2 ]

1 голос
/ 02 февраля 2011

В приведенном выше коде вы применяете разные стили к разным элементам. Единственный способ объединить классы - это применить все стили ко всем элементам. Если вам нужно смешивать и сочетать, у вас должны быть отдельные классы.

Хотя вы можете переместить большинство ваших правил a: link, a: посещения в определение класса ul.

0 голосов
/ 02 февраля 2011 
    <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;
}
...