Question

我有以下侧边栏菜单：

<div id="sidebar-wrapper" style="margin-right:-2%">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                    foo
                </a>
            </li>
            <li>
                <div class="accordion" id="accordion2">
                <div class="accordion-group">
                <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapsepro">
                    proyectos
                </a>
                </div>
                <div id="collapsepro" class="accordion-body collapse in">
                <div class="accordion-inner">
                    <a href="casas.php">casas</a>
                    <a href="condominios.php">condominios</a> 
                </div>
                </div>
                </div>                   
            </li>
        </ul>
    </div>

“li”元素具有此CSS代码

.sidebar-nav li {
text-align: center;
line-height: 65px;
font-size: 16px;
border-bottom-style: solid;
border-bottom-color: grey;
list-style-type: none;
}

.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
list-style-type: none;
}

如何覆盖

的样式

 <div class="accordion-inner">
                    <a href="casas.php">casas</a>
                    <a href="condominios.php">condominios</a> 
 </div>

与其他“a”链接有不同的规则，以便它们看起来不同（更小，更少的行间距等）？所以基本上改变了手风琴项目的风格。我真的很感激你的帮助！

Answer 1

.accordion-inner a{
    font-size: smaller !important;
    line-height: 10px !important;
    ...other styles
}

!important将覆盖应用于锚点的任何其他样式，无论是直接还是继承。

Answer 2

您可以使用以下课程来表达“手风琴内心”中的链接。格

.sidebar-nav li #collapsepro .accordion-inner a{
    /* Your style goes here. */
}

菜单列表项的不同样式

2 个答案: