Question

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>

Answer 1

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

一些读物：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 2

是的，它不应该根据css selector precedence规则工作。根据{{1}}规则，css selector precedence选择器值为10，对于class选择器值为1。因此，根据您的代码，我们可以轻松地计算出：

tag或.p1优先值= 10

.p2的优先级值为1 +1 = 2

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

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

Answer 3

您必须输入?:或\.(?: \.)+。分别为每个CSS设置样式

.p1

Answer 4

您应该尝试使用它来帮助它在另一个班级的另一个班级里发挥作用。

代码：

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

此处（。）是类标识符。

div p {margin-bottom：10px;}不起作用

4 个答案: