在p标签内使用div会丢失我的样式

Question

我有一个页面，我想表示学生的URL（但没有浏览器默认值，比如更改为悬停时的指针等），而我通过将文本包装在div中而丢失了我的样式。我有

的index.html：

<p>
    we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
    <div style="color:blue;">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>

styles.css的：

body {
    background: #f0f0f0;
    width: 80%;
    margin: 0 auto;
}

h1 {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 60px;
}

p {
    font-size: 20px;
    font-family: sans-serif;
}

.cl {
    margin: 38px;
    padding: 25px;
    background: #f8f8f8;
    font-family:DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
    font-size: 12px;
  }

.fake-url {
    color: blue;
}

最近我尝试在div中使用.fake-url

<p>
    we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
    <div class="fake-url;">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>

然后我做了

p, p div {
    font-size: 20px;
    font-family: sans-serif;
}

Answer 1

我建议你使用span而不是div，div是块元素，而另一只手是spans是内联元素，并且更适合你想要使用它的上下文。

正如上面提到的那样，你有一个额外的;在div的课堂内

Answer 2

<div>个元素不属于<p>个元素。浏览器通常会对此进行重做，以便<p>元素在<div>元素之前关闭，然后在之后再次打开。这有效地将您的段落分成两部分，一部分在<div>之前，一部分在之后。

相反，请使用<span>或更合适的<a>元素。

MDN has an entry提到了这一点。具体来说，在标记为＆＃34;标记省略＆＃34;的部分中，它提到如果开头<p>元素后跟一个开头<div>元素，那么该段落将被隐式关闭。

Answer 3

<p>
    we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
    <div class="fake-url">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>

只需从div中的类名中删除;即可修复它。