Question

我有这个结构...

<body>
    <div class="page-wrapper">
        <div class="page-content">
            <div class="login-welcome">
                <h3 class="welcome">
                <form class="form-login">

我可以将CSS应用于login-welcome和welcome，但不能应用于form-login。

在Chrome调试器中，看不到设置的样式。这些是相关的样式...

.login-welcome {
    position: absolute;
    top: 15%;
    left: 40%;
    display: block;
}

.welcome {
    font-weight: 600px;
    font-size: 30px;
    color: #653487;
}

.form-login {
    padding-top: 500px;
}

在调试器中，我可以通过调整element.style来调整相同的填充设置，因此我认为使用form .form-login或.form-login可以工作，但是我尝试过的类未将任何格式应用于班级。有什么理由吗？

Answer 1

当我将您的CSS复制到Chrome浏览器时，redux的{{1}}结束后有一些奇怪的字符

&:after, svg{ text-align: center; content: '\f105'; position: absolute; top: 0; left: 100%; height: 100%; opacity: 0.9; font-family: "Font Awesome 5 Solid"; font-weight: 900; font-style: normal; font-variant: normal; font-rendering: auto; -webkit-font-smoothing: antialiased; } 似乎正在阻止chrome解释下一个css行

删除此字符后，以下css选择器（例如}）将再次求值，并将应用于您的表单元素-一切都会正常工作

Answer 2

您可以使用以下内容：

div.login-welcome .welcome{
  color:red;
}

<div class="page-wrapper">
  <div class="page-content">
    <div class="login-welcome">
      Im not affected
      <h3 class="welcome">Some heading text</h3>
      <form class="form-login">
        some form text
      </form>
    </div>
  </div>
</div>

它的工作原理如下：div.login-welcome .welcome是一个CSS选择器，它为具有welcome类的元素和具有{log1类的欢迎。

希望这会有所帮助。

Answer 3

您的代码有效：

.login-welcome {
    position: absolute;
    top: 15%;
    left: 40%;
    display: block;
}

.welcome {
    font-weight: 600px;
    font-size: 30px;
    color: #653487;
}

.form-login {
    padding-top: 500px;
}

<div class="page-wrapper">
    <div class="page-content">
      <div class="login-welcome">
        <h3 class="welcome">Welcome header</h3>
        <form class="form-login">
          <input type="text">
        </form>
      </div>
    </div>
  </div>

看看这个小提琴：https://jsbin.com/segiqoyoci/edit?html,css,output

CSS没有被应用到嵌套类

3 个答案: