将ust类移至父元素后文本合并，如何简化HTML代码？

问题分析 #

你尝试将所有导航子元素的ust类移到父容器yanyana上以简化HTML，但出现文本合并，原因是：

• ust类中的margin: 15px 15px属于非继承属性，父元素添加该类后，子元素无法自动获得外边距，导致文本挤在一起；
• 原ust类里的font-size: 100px被后续的font简写属性覆盖，属于冗余代码，可直接删除。

解决方案 #

方案1：使用CSS后代选择器批量应用样式 #

无需修改HTML子元素结构，通过CSS选择器自动为父容器下的所有导航子元素应用原ust的样式：

修改后的HTML

移除所有子元素的ust类，保留父容器的yanyana类：

<!DOCTYPE html>
<html lang="tr">
<head>
    <link rel="stylesheet" href="anacss.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Technopat</title>
</head>
<body bgcolor="#191919">
    <img class="tech" src="technopat-logo.webp" alt="technopat">
    <div class="yanyana">
        <div class="now" style="margin-left: 90px;">Anasayfa</div>
        <a class="link" href="sosyal.html"><div class="later">Sosyal</div></a>
        <a class="link" href="destek.html"><div class="later">Destek</div></a>
        <a class="link" href="bilgitabani.html"><div class="later">Bilgi TB</div></a>
        <a class="link" href="sorular.html"><div class="later">Sorular</div></a>
        <a class="link" href="videolar.html"><div class="later">Videolar</div></a>
        <a class="link" href="tavsiyeler.html"><div class="later">Tavsiyeler</div></a>
        <a class="link login" href="login.html"><div class="later">Giriş Yap</div></a>
        <a class="link login" href="register.html"><div class="later">Kayıt Ol</div></a>
    </div>
</body>
</html>

修改后的CSS

删除原.ust类，替换为针对yanyana子元素的选择器，同时移除冗余的font-size：

.now{
    color:#ffffff;
}

.later{
    color:#C8C8C8;
}

.yanyana{
    display: flex;
}

/* 批量应用原ust类的样式到所有导航子元素 */
.yanyana > div, .yanyana a > div {
    font: 15px / 1.4 sans-serif;
    font-family: 'Segoe UI','Helvetica Neue',Helvetica,Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans',sans-serif;
    margin: 15px 15px;
}

.link{
    text-decoration: none;
    color: inherit;
}

.tech{
    margin: 0px 0px 0px 75px;
}

.login{
    background-color: black;
}

方案2：语义化类名（推荐，更易维护） #

给所有导航子元素添加统一的nav-item类，将原ust的样式转移到该类下，同时保留now/later作为状态修饰类：

修改后的HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <link rel="stylesheet" href="anacss.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Technopat</title>
</head>
<body bgcolor="#191919">
    <img class="tech" src="technopat-logo.webp" alt="technopat">
    <div class="yanyana">
        <div class="nav-item now" style="margin-left: 90px;">Anasayfa</div>
        <a class="link" href="sosyal.html"><div class="nav-item later">Sosyal</div></a>
        <a class="link" href="destek.html"><div class="nav-item later">Destek</div></a>
        <a class="link" href="bilgitabani.html"><div class="nav-item later">Bilgi TB</div></a>
        <a class="link" href="sorular.html"><div class="nav-item later">Sorular</div></a>
        <a class="link" href="videolar.html"><div class="nav-item later">Videolar</div></a>
        <a class="link" href="tavsiyeler.html"><div class="nav-item later">Tavsiyeler</div></a>
        <a class="link login" href="login.html"><div class="nav-item later">Giriş Yap</div></a>
        <a class="link login" href="register.html"><div class="nav-item later">Kayıt Ol</div></a>
    </div>
</body>
</html>

修改后的CSS

.now{
    color:#ffffff;
}

.later{
    color:#C8C8C8;
}

.yanyana{
    display: flex;
}

/* 统一导航项基础样式 */
.nav-item {
    font: 15px / 1.4 sans-serif;
    font-family: 'Segoe UI','Helvetica Neue',Helvetica,Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans',sans-serif;
    margin: 15px 15px;
}

.link{
    text-decoration: none;
    color: inherit;
}

.tech{
    margin: 0px 0px 0px 75px;
}

.login{
    background-color: black;
}

两种方案都能实现代码简化，避免文本合并，方案2的语义化类名更利于后期扩展和维护。

内容的提问来源于stack exchange，提问作者tikhi