rope {

Question

我已经通过验证器运行了我的代码，所以没有语法错误，但我无法弄清楚发生了什么。我没有做任何改变＆＃34; p＆＃34;我的代码中的元素。我尝试过为p类设计样式。我已经尝试将它们包装在一个＆＃34; div＆＃34;标记和样式化，但它似乎继续继承body属性。如果我想根据文本设置样式，我必须通过body属性来完成。

这是HTML。

<div id="topBar"><img src="images/logo.png" alt="Escaping Shapes"/></div>
<div id="rope"><img src="images/rope2.png" alt="Bottom of logo border"/></div>
  <p>Yarrrrgh! Shapes be escaping from below the surface of the Web! Push'em back down below the page as fast as ye can!</p>

  <p class="bold">Your time: <span id="time">(not attempted yet)</span></p>


<div id="box">

</div>

这是身体的CSS：

body {
        width: 100%;
        font-family: Verdana, Geneva, sans-serif;
        margin: 0;
        background-color: #ecf0f1;
        font-weight: bold;
        text-align: center;
    }

这是＆＃34; p＆＃34;的CSS。对我没有任何影响的元素大声笑。

  p {
        position: relative;
        font-weight: bold;
        width: 20px;
        margin: auto;
        text-align: center;

    }

不确定发生了什么，但我们将非常感谢任何帮助。如有必要，我可以提供更多代码。

编辑我的整个CSS：

    body {
        width: 100%;
        font-family: Verdana, Geneva, sans-serif;
        margin: 0;
        background-color: #ecf0f1;
        font-weight: bold;
        text-align: center;
    }

    #topBar {
        background-color: #2980b9;
        height: 120px;
        width: 100%;
        position: relative;
    }

        #topBar img {
            display: block;
            margin: 0 auto;
            width: 600px;
            position: relative;
            top: 25px;
            left: -85px;
        }




    #box {
        background-color: #0ff;
        height: 150px;
        width: 150px;
        display: none;
        position: relative;
        top: 0;
        margin-top: 0;
        margin-bottom: 10px;
        opacity: 0.9;
        box-shadow: 10px 10px 5px #7e7e7e;
        -webkit-transition:all 0.1s linear;
        -moz-transition:all 0.1s linear ;
        -ms-width:all 0.1s linear ;
        -o-width:all 0.1s

    }

    #box:active {
        box-shadow: none;
        top: 10px;
        margin-bottom: 0;
       -webkit-transform:scale(0.25, 0.25);
       -moz-transform:scale(0.25, 0.25) ;
       -ms-width:scale(0.25, 0.25) ;
       -o-width:scale(0.25, 0.25) ;
    }

    #box:hover {
        opacity: 1;
    }

    #rope {
        background-repeat: repeat-x;
        background-image: url(images/rope2.png);
        width: 100%;
        position: relative;
        top: -25px;


    .bold {
        font-weight: bold;
    }



     p {
        position: relative;
        font-weight: bold;
        width: 20px;
        margin: auto;
        text-align: center;

    }

Answer 1

您尚未关闭-o-width:all 0.1s 你的#box css属性下有一个分号这是你的问题。

您还没有关闭#rope属性}

Answer 2

你的CSS没有问题。 <p>在您给定的代码中运行良好。 CSS属性相互重叠。所以要小心。 jsfiddle

修改作为你的新编辑你错过了关闭} 写

#rope { background-repeat: repeat-x; background-image: url(images/rope2.png); width: 100%; position: relative; top: -25px; }

而不是

rope {

background-repeat: repeat-x; background-image: url(images/rope2.png); width: 100%; position: relative; top: -25px;

link

Answer 3

似乎p样式正在应用于p。我尝试通过p规则设置字体颜色，它可以工作：http://jsfiddle.net/L2q1Lbzj/

body {
        width: 100%;
        font-family: Verdana, Geneva, sans-serif;
        margin: 0;
        background-color: #ecf0f1;
        font-weight: bold;
        text-align: center;
    }

 p {
        position: relative;
        font-weight: bold;
        width: 20px;
        margin: auto;
        text-align: center;
        color: red;

    }

无法在HTML中获取要更改的元素

3 个答案:

rope {