style属性在嵌套段落元素中不起作用

时间:2015-10-11 04:05:10

标签: html css web

在以下html代码中 段落(p)元素颜色不会随着css的颜色属性而改变 ,*

  

但如果我用div元素替换p它正常工作..

enter code here

如何在Ubuntu 14.04中安装Node.js和npm Tool

    

如何在Ubuntu 14.04中安装Node.js和npm工具

<div>
    <h2>
        Introduction:
    </h2>
    <p style="color:red;">
    <h3>Node.js</h3>
    &nbsp;  &nbsp;  &nbsp;
    Nodejs is an open source , cross platform , JavaScript runtime environment  which is based on  <a href="https://developers.google.com/v8/"> Chrome's V8 JavaScript engine</a>.
    <br>
    Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.<br><br>

    It is used to develop scalable, real-time , network and server-side applications written in javascript and we can run that applications within Node.js runtime environment  on Mac OS X ,Windows ,Linux ,solaris and BSD.<br><br>

    Node.js provides an event-driven architecture and a non-blocking I/O API designed to optimize an application's throughput and scalability for real-time web applications. It uses Google V8 JavaScript engine to execute code, and a large percentage of the basic modules are written in JavaScript. Node.js contains a built-in library to allow applications to act as a web server without software such as Apache HTTP Server, Nginx or IIS.<br><br>

    Node.js can be combined with a browser, a document database (such as MongoDB or CouchDB) and JSON for a unified JavaScript development stack.<br><br>

    According to wikipedia,

    Node.js is used by IBM, Microsoft, Yahoo!, Walmart, LinkedIn, Rakuten, PayPal and GoDaddy .

    </p>

    <p>
        <h3>npm</h3>
    &nbsp; &nbsp; &nbsp;

    npm is the pre-installed package manager for the Node.js server platform. It is used to install Node.js programs from the npm registry, organizing the installation and management of third-party Node.js programs.
    </p>
</div>

**

  

上述代码的输出   是   **   enter image description here

  用div元素

替换上面代码中的第一个p元素后的

输出是 enter image description here

  

为什么color属性不在p元素中工作但在div中工作   元素(在上面的代码中)?

2 个答案:

答案 0 :(得分:8)

<p>是一个块元素,<p style="..."> <h3>heading</h3> text </p> 不能包含块元素。当你这样写:

<h3>

浏览器不允许<p>存在于<p>内,因此可以通过提前关闭<p style="..."> </p><h3>heading</h3> text 代码来安静地修复像这样:

<div>

使用<div>时效果很好,因为<h3>可以包含其他块元素,例如<h3>

<p>移到<p>之外,它应该可以正常工作。

虽然我注意到将所有文字放在一个<br><br>并使用<p>分隔段落是有点愚蠢的!您可能希望将每个段落放在自己的var colors = [color1, color2, ....]; var i = 0, j = 0, temp = ""; while (i < 10) { j = i + 1; while (j < 10) { if {user_chooses_color2} { temp = colors[j]; colors[j] = colors[i]; colors[i] = temp; } j++; } i++; } 标记中,因为这是“p”的缩写:)

答案 1 :(得分:0)

尝试添加css规则,而不是使用内联styles(最好在<head>中包含的<style></style>标记内:

p {
  color: red;
}