Question

我希望将下拉文本的尺寸设置为较小（15像素），但是由于其在我的标签中的风格使其与其他导航样式相同。我试图制作类，但它似乎并没有改变任何东西，如果这样做，它将转到默认的无样式导航。（紫色和带下划线的）

我的标题标记：

<header>
        <div>
            <?php
                    if (isset($_SESSION['userId'])) {
                        echo "

                    <div class='dropdown' style='float:right;'>
                        <li class='login'><a href='#'>Welcome</a>
                            <div class='dropdown-content'>
                                <ul>
                                    <li style='font-size:15px;'><a href='#'>My Account</a></la>
                                    <li style='font-size:15px;'><a href='#'>My Orders</a></la>
                                    <li style='font-size:15px;'><a href='#'>My Wishlist</a></la>
                                    <li style='font-size:15px;'><a href='#'>My Cart</a></la>
                                    <li style='font-size:15px;'><a href='./includes/logout.inc.php?logout-submit'>Logout</a></li>
                                </ul>
                            </div>
                        </li>
                    </div>

                        ";
                    }
                    else{
                        echo "<li class='login'><a href='login.php'>Login / Sign up</a></li>";
                    }
            ?>

        </div>
        <div class="container">
            <div id="branding">
                <h1><a href="index.php" title="Home"><img src="./Header Image/header.png"></a></h1>
            </div>
            <nav>
                <ul id="nav">
                    <li class="current"><a href="index.php">Home</a></li>
                    <li><a href="apple.php">Apple</a></li>
                    <li><a href="samsung.php">Samsung</a></li>
                    <li><a href="gadgets.php">Gadgets</a></li>
                </ul>
            </nav>
        </div>
</header>

我的标题样式：

/* Header */
header{
    background: #35424A;
    color: #FFFFFF;
    padding-top: 30px;
    min-height: 70px;
    border-bottom: #FF3B3F 5px solid;
}

header ul a{
    color: #FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 24px;
}

header li{
    float: left;
    display: inline;
    padding: 0px 20px 0px 20px;
}

header #branding{
    float: left;
}

header #branding h1{
    margin: 0;
}

header nav{
    float: right;
    margin-top: 25px;
    margin-right: 100px;
}

header .highlight, header .current a{
    color: #FF3B3F;
    font-weight: bold;
}

header .current2 a{
    color: #FF3B3F;
}

header a:hover{
    color: #CCCCCC;
}

.login a{
    color: #FFFFFF;
    text-decoration: none;
    float: right;
}

.login {
    color: #FFFFFF;
    text-decoration: none;
    float: right;
    margin-top: -10px;
    margin-right: 10px;
}

有没有办法使我的下拉文字大小变小？

下拉代码：

<div class='dropdown' style='float:right;'>
     <li class='login'><a href='#'>Welcome</a>
         <div class='dropdown-content'>
               <ul>
                   <li style='font-size:15px;'><a href='#'>My Account</a></la>
                   <li style='font-size:15px;'><a href='#'>My Orders</a></la>
                   <li style='font-size:15px;'><a href='#'>My Wishlist</a></la>
                   <li style='font-size:15px;'><a href='#'>My Cart</a></la>
                   <li style='font-size:15px;'><a href='./includes/logout.inc.php?logout-submit'>Logout</a></li>
               </ul>
         </div>
     </li>
</div>

Answer 1

如果我正确理解了您的问题，则只能通过以下方式设置下拉内容的立即li样式：

header .dropdown > li > .dropdown-content > ul > li {
     font-size: 15px;
}

>将确保该样式仅应用于直接子级，而不应用于其中的任何嵌套子级

将样式应用于标签时，使样式覆盖其他样式

1 个答案: