Html 将样式设置应用于标记时使其替代其他样式

我想样式我的下拉文本大小更小（15px），但因为它在我的标签它样式到我的其他导航样式。我试图创建类，但它似乎没有改变任何东西，如果它改变了，它将转到默认的未设置样式的nav。（紫色和下划线）

我的标题标记：

<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>

有没有办法让我的下拉文本变小

下拉代码：

<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>

如果我正确理解了您的问题，您只能用以下方式设置下拉内容的立即

li

：

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

---

将确保样式仅应用于direct child，而不是其中的任何嵌套子项

我添加了您的代码，但它仍然没有更改文本大小，是否需要对包含我的nav的其他代码进行调整？编辑：我在其他样式中添加了“nav”，因此它只适用于nav。从@dabishan代码更改为

ul.dropdown

到

。dropdown

并删除

标题上的“点”

例如

标题。dropdown.dropdown内容li{font size:15px；}

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