Question

<p>
la la la la la la
</p>
<p>
<strong>Hello</strong>
<p>
<p>
la la la la la la
</p>
<p>
la la la la la la
</p>
<p>
<strong>Hello</strong>
<p>
<p>
la la la la la la
</p>

拥有以上的HTML。有可能用css实现这个目标吗？

p {margin-bottom:24px;}
p when having <strong>....</strong> set margin-bottom:5px ?

Answer 1

不，您不能选择父母 - 在这种情况下p是strong的父母，但您可以设置strong＆＃39;样式以满足您的需求。另请注意，您可以将p样式设置为strong的灵活容器。

Answer 2

你可以用JS

来做

＆＃13;

$(document).ready(function(e){

  $('p').has('strong').css('margin','100px');

});

＆＃13;

p{ margin:20px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
la la la la la la
</p>
<p>
<strong>Hello</strong>
<p>
<p>
la la la la la la
</p>
<p>
la la la la la la
</p>
<p>
<strong>Hello</strong>
<p>
<p>
la la la la la la
</p>

＆＃13;

Answer 3

P tag有margin-bottom 24px和strong 5px。

p {
  margin:0px 0px 24px 0px;
  background:#f22;
 }
 strong{
   background:#ccc;
 }
 p > strong{
   display:inline-block;
   margin-bottom:5px;
 }

<p>
la la la la la la
</p>
<p>
<strong>Hello</strong>
<p>
<p>
la la la la la la
</p>
<p>
la la la la la la
</p>
<p>
<strong>Hello</strong>
<p>
<p>
la la la la la la
</p>

Answer 4

更新css

p
{
  margin-bottom: 50px;
}

p > strong
{
  margin-bottom: 100px;
  display:block;
}

Demo Fiddle

当段落<strong>时，可以设置不同的边距？

4 个答案: