css 将HTML类括在括号中

hrysbysz 于 11个月前发布在其他

关注(0)|答案(1)|浏览(146)

我试图使一个简单的论坛网站.然而，当我试图写一些类在平原的形式，该网站得到损坏，我不知道如何修复它.我试图转移“ust”类从第12行到第20行的HTML代码下面到第11行类，但当我打开该网站，文本合并。我怎样才能在不合并文本的情况下编写更简单易读的代码？
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="now ust" style="margin-left: 90px;">Anasayfa</div>
        <a class="link" href="sosyal.html"><div class="later ust">Sosyal</div></a>
        <a class="link" href="destek.html"><div class="later ust">Destek</div></a>
        <a class="link" href="bilgitabani.html"><div class="later ust">Bilgi TB</div></a>
        <a class="link" href="sorular.html"><div class="later ust">Sorular</div></a>
        <a class="link" href="videolar.html"><div class="later ust">Videolar</div></a>
        <a class="link" href="tavsiyeler.html"><div class="later ust">Tavsiyeler</div></a>
        <a class="link login" href="login.html"><div class="later ust">Giriş Yap</div></a>
        <a class="link login" href="register.html"><div class="later ust">Kayıt Ol</div></a>
    </div>
</body>
</html>

字符串
这是CSS代码：

.now{
    color:#ffffff;
}

.later{
    color:#C8C8C8;
}

.yanyana{
    display: flex;
}

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

.ust{
    font-size: 100px;
    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;
}

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

.login{
    background-color: black;
}

型
我试着删除第12行和第20行中的“ust”类，并将其添加到第11行中的类中，但是当我打开站点时，文本出现合并。

编辑：添加图片。

的数据
就像在这张照片中，我试图简化“ust”功能，就像我在第一张照片中做的“稍后”功能一样。

css

来源：https://stackoverflow.com/questions/77510117/enclosing-html-classes-in-parentheses

1条答案

按热度按时间

k97glaaz1#

为了避免在每个元素上指定ust类，您可以将CSS规则直接应用于yanyana类的所有子div元素。这将确保父元素中的所有div元素自动继承样式。
以下是如何修改CSS：

.yanyana div {
  font-size: 100px;
  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;
}

字符串
您还应该从HTML中div.yanyana内的每个div中删除ust类。
事情是这样的

<!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>
  <style>
    .yanyana {
      display: flex;
    }

    .yanyana div {
      font-size: 100px;
      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;
    }

    .now {
      color: #ffffff;
    }

    .later {
      color: #C8C8C8;
    }

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

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

    .login {
      background-color: black;
    }
  </style>
</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中，这被称为后代选择器。你可以在这里阅读它们：https://css-tricks.com/almanac/selectors/d/descendant/

赞(0）回复(0）举报 11个月前

我来回答

css 将HTML类括在括号中

1条答案

相关问题

热门标签

最新问答