Question

我创建了一个新的div并在里面放了一些东西。然后我去了样式表并创建了相应的样式。当我去刷新页面并检查元素时，div不会从样式表中拉出样式。帮助，因为它真的令人沮丧。

这是html

<div class="2columnlayout">
        <div id="managecontent1">
            <img src="img/wordpress-logo.png" />
            <p>Wordpress</p>
        </div>
        <div id="managecontent2">
            <img src="img/filezillaicon.png" />
            <p>F.T.P.</p>
        </div>
    </div>

这里是相应的css，它不会识别

.2columnlayout{
text-align: center;
font-size: 24px;
font-weight: 300;
margin-top: 90px;

}

Answer 1

像这样写：

.columnlayout2

而不是

.2columnlayout

因为 CSS 无法识别Class＆amp; ID以数字编号开头。

Answer 2

类不能以数字开头。将其重命名为类似twocolumnlayout的内容。

Answer 3

试试这个。

<div class="columnlayout">
        <div id="managecontent1">
            <img src="img/wordpress-logo.png" />
            <p>Wordpress</p>
        </div>
        <div id="managecontent2">
            <img src="img/filezillaicon.png" />
            <p>F.T.P.</p>
        </div>
    </div>

样式表是：

.columnlayout div p{
text-align: center;
font-size: 24px;
font-weight: 300;
margin-top: 90px;
}

Answer 4

CSS的syntax rules不允许以数字开头的标识符，例如2columnlayout，因此规则中的选择器无效，因此忽略整个规则。

正如其他答案中所建议的那样，您可以使用以字母开头的类名来避免此问题。在适用的情况下，这通常是最好的。

但是，类名可能以数字开头（限制是CSS语法，而不是HTML语法），如果不能更改类名，则可以使用{{3数字。在这里，您可以将数字2替换为\32 （反斜杠，数字3，数字2，空格），这是基于数字的Unicode代码编号（十六进制为32 in）的转义符号：

.\32 columnlayout {
  /* declarations here */
}

div与class不会识别css样式

4 个答案: