Question

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

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

并且html代码如下所示，

paddingRight.small and .paddingLeft.tiny

如果我这样提及类名，则CSS无法正确应用。

预期的CSS类：

paddingRight.small and .paddingLeft.small

实际班级：

json

为什么会这样？

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>

Answer 2

您在html中使用的方法div具有4个不同的类。改变一个会改变一切。您应该尝试：

<div className="paddingRight">
 <div className="small">
 //something
 </div>
 <div className="tiny">
 //something
 </div>
</div>
<div className="paddingLeft">
 <div className="small">
 //something
 </div>
 <div className="tiny">
 //something
 </div>
</div>

创建具有多个CSS类的类名不起作用

2 个答案: