Question

我的css在我正在处理的网站的过去2页上工作正常，但突然之间，我有一个我试图设计的div，但我放入css的任何内容都不会对div产生影响。也许我错过了一些简单的东西或者说出了一些错误的东西，但我无法弄明白这里有什么问题。下面，我正在尝试编辑div＆＃34; 3left＆＃34;，它有一个顶部的图像，以及图像下方的一段文字，但我无法更改背景颜色，或将div定位在我所在的位置想要在div＆＃34; page3＆＃34;。提前谢谢。

继承了我正在使用的html：

<div id="page3">
            <div id="3left">
              <image src="images/entertop_03.png"></image>
                <h4>text<br>

text<br>
text<br>
text<br>
text <a href="#" class="class1">text</a><br>
text</h4>
            </div>
</div>

和我的css：

#page3 {
       background-image: url("../images/page3back_01.jpg");
    background-size: cover;
    width: 100%;
    height: 100%;

    min-height: 730px;
    font-size: 16px;
    height: 2em;


}

#3left {
    width:100%;
    margin-top: 50px;
    max-width: 440px;
    height: 330px;
    background-color: #221f1f;



}

Answer 1

这是因为ID以数字开头。

CSS specification详细说明了允许的内容。

所有CSS语法在ASCII范围内都不区分大小写（即，   [a-z]和[A-Z]是等价的），但不包括的部分除外   CSS的控制。例如，区分大小写的值   HTML属性＆＃34; id＆＃34;和＃34;类＆＃34;，字体名称和URI的谎言   超出本规范的范围。特别注意   元素名称在HTML中不区分大小写，但在XML中区分大小写。

在CSS中，标识符（包括元素名称，类和ID）   选择器）只能包含字符[a-zA-Z0-9]和ISO 10646   字符U + 00A0和更高，加上连字符（ - ）和下划线   （_）;它们不能以数字，两个连字符或连字符开头   一个数字。标识符还可以包含转义字符和任何字符   ISO 10646字符作为数字代码（参见下一项）。例如，   标识符＆＃34; B＆amp; W？＆＃34;可以写成＆＃34; B \＆amp; W \？＆＃34;或＆＃34; B \ 26 W \ 3F＆＃34;。

Answer 2

您使用了<image>而不是<img>，并且您使用了以数字开头的ID，以下内容可以正常使用。

#page3 {
       background-image: url("../images/page3back_01.jpg");
    background-size: cover;
    width: 100%;
    height: 100%;

    min-height: 730px;
    font-size: 16px;
    height: 2em;


}

#left3 {
    width:100%;
    margin-top: 50px;
    max-width: 440px;
    height: 330px;
    background-color: #221f1f;



}

<div id="page3">
            <div id="left3">
              <img src=""></img>
                <h4>text<br>

text<br>
text<br>
text<br>
text <a href="#" class="class1">text</a><br>
text</h4>
            </div>
</div>

Answer 3

允许类标识符以数字开头，但ID标识符不是。

[id='1800number_box'] {
 /* does work */
}

#1800number_box {
  /* doesn't work */
}

/* Or, you can "escape" the number, which looks funky but works: */
#\31 800number_box {
  /* does work */
}
/* See: http://mothereff.in/css-escapes */`

为什么我的css不影响我的div？

3 个答案: