为什么未应用内部 div 的属性？

Question

我对网络开发还很陌生，所以请多多包涵。我正在使用 Jekyll 生成我的网页。所以我创建了一些自定义的 classes，并在相应的 _sass 文件中指定了 css 属性。

以下是与问题相关的两个class：

.quote{
        width: 100%;
        margin: auto;
        text-align: center;
        background-color: #171717;
        font-size: 25px;
        padding: 10px;

        &.author{
            width: 50%;
            float: right;
            font-size: 20px;
            color: red;
            padding: 10px;
        }
  }

这是Jekyll生成的css代码：

section .quote { width: 100%; margin: auto; text-align: center; background-color: #171717; font-size: 25px; padding: 10px; }

section .quote.author { width: 50%; float: right; font-size: 20px; color: red; padding: 10px; }

以下是相关的HTML代码：

<div class="quote">

        <div id="randomquote">
            Hello there, this is supposed to show a quote.
         </div>


        <div class="author">
            This should be the author's name.
        </div>

</div>

但是，author class 的属性不适用于内部 div。相反，它具有对应于 quote 的属性。这是为什么？我错过了什么吗？

请注意，我打算在 quote 中使用 author。

Answer 1

在 CSS 中的 & 和 .author 之间添加一个 space。看这里：

https://jsfiddle.net/y4j6ua1r/1/

另外，在您生成的代码中，.quote 和 .author 之间应该有一个 space 参见此处：

https://jsfiddle.net/y4j6ua1r/2/

为什么未应用内部 div 的属性？

Why is the property of an inner div not being applied?

html

css

jekyll

为什么未应用内部 div 的 属性？

Why is the property of an inner div not being applied?

html

css

jekyll

为什么未应用内部 div 的属性？