是否可以基于层次结构元素设置条件css

Question

考虑以下HTML:

<div>
   <p>
     <strong>Title</strong>
   </p>
   <p>
     some resular text....
   </p>
</div>

只有当段落内部有"强"时，我才想在段落中添加填充。

是否可以只使用CSS（不使用JS）？

Answer 1

是的，您可以这样做：

p > strong {
    padding:10px;
}

Answer 2

可以。请参阅本文了解规则。

演示：https://jsfiddle.net/n05jaua4/3/

HTML:

<div>
   <p>
     <strong>Title inside paragraph</strong>
   </p>
   <p>
     some resular text....
   </p>
</div>
<strong>Title</strong>

CSS：

p strong{
   padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}