html - 使用多个不工作的 css 类创建类名

Question

我在 css 文件中有以下 css 样式

.paddingRight.tiny {
    padding-right: 0.5em;
}

.paddingRight.small {
    padding-right: 1em;
}

.paddingRight.medium {
    padding-right: 1.5em;
}

.paddingLeft.tiny {
    padding-left: 0.5em;
}

.paddingLeft.small {
    padding-left: 1em;
}

.paddingLeft.medium {
    padding-left: 1.5em;
}

html代码如下所示，

<div className="paddingRight small paddingLeft tiny">
    //Some content goes here
</div>

如果我这样提到类名，css 应用不正确。

预期的 CSS 类:

paddingRight.small and .paddingLeft.tiny

实际类(class):

paddingRight.small and .paddingLeft.small 

为什么会这样？

Answer 1

className 语法适用于 JSX 代码，这是一种 JavaScript 语言，为了开发人员的简单性而看起来像 HTML，但它们不相同。我不相信它会导致控制台出错，但它不会呈现样式。对于 HTML，您应该使用 class 语法。您也不能在类的名称中包含 .，因为这是类的标识符。您通常使用 - 或 camelCase。

我添加了红色背景类只是为了向您展示代码的工作原理。

.red {
    background-color: red;
}

.paddingRight-tiny {
    padding-right: 0.5em;
}

.paddingRight-small {
    padding-right: 1em;
}

.paddingRight-medium {
    padding-right: 1.5em;
}

.paddingLeft-tiny {
    padding-left: 0.5em;
}

.paddingLeft-small {
    padding-left: 1em;
}

.paddingLeft-medium {
    padding-left: 1.5em;
}

<div class="red paddingRight-small paddingLeft-tiny">
    <p>Some content goes here...</p>
</div>