CSS 边框未显示在标记中<p>？

我现在对css和html5非常陌生。

我不知道我在代码中做错了什么，请告诉我我的错误

为什么p标签中没有显示边框?

<html>
<head>
<title>Margin</title>
<style>
h1{
border:10px solid red;
margin:25px 50px 75px 100px;
}
h3{
border:1px solid red;
margin:auto;
}
div{
margin:10px 100px 1cm 200pt;
}
h2.mf{
margin-bottom:inherit;
}
p.mf{/*Not Working*/
margin:inherit;
border: 5px solid red;
}
</style>
</head>
<body>
<h1>This is head 1.</h1>
<h3>This is head 3.</h3>

<div class= "mf">
<h2>This is again h2</h2>
<p>This is para....</p>
</div>
</body>
</html>

选择器p.mf表示p标签具有mf类

您需要更改为.mf p，因为您的p标签在div类mf

<html>
<head>
<title>Margin</title>
<style>
h1 {
border:10px solid red;
margin:25px 50px 75px 100px;
}
h3 {
border:1px solid red;
margin:auto;
}
div {
margin:10px 100px 1cm 200pt;
}
h2.mf {
margin-bottom: inherit;
color: green;
}
.mf p {/*Not Working*/
margin:inherit;
border: 5px solid red;
}
</style>
</head>
<body>
<h1>This is head 1.</h1>
<h3>This is head 3.</h3>

<div class= "mf">
<h2>This is again h2</h2>
<p>This is para....</p>
</div>
</body>
</html>

没有mf类的pHTML元素

如果我要设置HTML文档中所有p的样式，我会选择这个样式

p {
margin: inherit;
border: 5px solid red;
}

或

如果我要为.mf元素的子元素p元素设置样式，我会选择下面的样式

.mf p {
margin: inherit;
border: 5px solid red;
}

h1 {
border: 10px solid red;
margin: 25px 50px 75px 100px;
}
h3 {
border: 1px solid red;
margin: auto;
}
div {
margin: 10px 100px 1cm 200pt;
}
h2.mf {
margin-bottom: inherit;
}
p {
border: 5px solid red;
}

<h3>This is head 3.</h3>
<div class="mf">
<h2>This is again h2</h2>
<p>This is para....</p>
</div>

这是因为你还没有初始化你的<p>标签中的类:D .

像这样:

<p class="mf">This is para....</p>

或者你可以在你的css

中试试

p{
margin:inherit;
border: 5px solid red;
}

注意:CSS中的点(.)是初始化类

您使用.mf，因为您的div类是mf，然后您将p放在后面以指定<p>标签。

<html>
<head>
<title>Margin</title>
<style>
h1{
border:10px solid red;
margin:25px 50px 75px 100px;
}
h3{
border:1px solid red;
margin:auto;
}
div{
margin:10px 100px 1cm 200pt;
}
h.mf{
margin-bottom:inherit;
}
.mf p {/*Not Working*/
margin:inherit;
border: 5px solid red;
}
</style>
</head>
<body>
<h1>This is head 1.</h1>
<h3>This is head 3.</h3>

<div class= "mf">
<h2>This is again h2</h2>
<p>This is para....</p>
</div>
</body>
</html>

相关内容

最新更新

热门标签：