div p { margin-bottom: 10px;} 不工作 [重复]答案

【问题标题】：div p { margin-bottom: 10px;} not working [duplicate]div p { margin-bottom: 10px;} 不工作 [重复]
【发布时间】：2019-02-24 07:08:17
【问题描述】：

div p { margin-bottom: 10px;} 不工作。不知道这里出了什么问题。

.p1, .p2 {
    margin-bottom: 10px; 
    }

工作正常，但div p {...} 不工作。

body {
  position: relative;
  background-color: Royalblue; /*#f0f0f0;*/
  margin: 0px;
}

.div {
    position: relative;
    top: 20px;
    width: 30%;
    margin: 0 auto;
    text-align: center;
    border: 1px solid black;
}

.p1 {
    margin: 0;
}

.p2 {
    margin: 0;
}

div p {
    margin-bottom: 10px;
}

<body>  
        
        <div class="div">
      
            <p class="p1">Welcome to Homepage</p>
            <p class="p2">Lorem Ipsum</p>
            
        </div>
   
</body>

【问题讨论】：

因为 class .p1 比组合元素 div p 具有更高的特异性，因此规则优先。你想要的搜索词是“css specificity”；有一些离散规则为不同的选择器分配“权重”，以帮助浏览器确定级联样式时的优先级。
stackoverflow.com/questions/9311165/…

标签： html css

【解决方案1】：

由于特殊性，.p1 类规则将覆盖div p 规则。如果你从类规则中删除margin: 0，它应该可以工作，因为规则之间不会存在竞争，并且可以应用 10px。

部分阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

【讨论】：

删除页边距会改变他为班级设置的页边距。
他从来没有说过他需要这条规则，所以我只是假设他是个聪明人，如果他真正需要的话，他会继续阅读/学习并想办法让它发挥作用.
他为什么拥有它，这就是我要说的。

【解决方案2】：

是的，它不应该根据css selector precedence 规则工作。根据css selector precedence 规则class 选择器值为10，tag 选择器值为1。所以从您的代码中我们可以轻松计算：

.p1 或 .p2 优先级值 = 10

div p 优先级值为 1 + 1 = 2

这就是 div p {...} 选择器不起作用的原因。

您可以从这里了解更多关于 CSS 优先规则的信息：https://css-tricks.com/specifics-on-css-specificity/

【讨论】：

【解决方案3】：

您必须输入.p1 或.p2。分别为它们中的每一个设置样式

.p1 { margin-bottom: 10px;}

.p2 { margin-bottom: 10px;}

【讨论】：

【解决方案4】：

你应该试试这个，它可以帮助你在另一个类中充分发挥它的作用。

代码：

    .div .p1 { margin-bottom: 10px;}

这里 (.) 是类标识符。

【讨论】：

给我反对选民的理由，它对我有用，所以我可以帮助解决问题。