Question

我有这样的HTML：

   <div class="entry">
     <p></p> //text-indent here
     <blockquote>
      <p></p> //no text-indent here
     </blockquote>
    </div>

我想仅识别<p>内的.entry代码，而<p>内的.entry blockquote

我的CSS

.entry{
  p{
    margin: .85em auto;
    line-height: 1.7;
    text-indent: 1.5em;
  }
}

有没有办法修改现有的css可能会在不引入任何新规则的情况下以某种方式混淆not选择器？

Answer 1

您只需要更具体地了解您不希望缩进的元素。请参阅下面的CSS。此外，您发布的CSS将是有效的SCSS，但不是普通的CSS，只是fyi。

  .entry blockquote p {
      text-indent: 0;
  }

Answer 2

有两种方法可以做到这一点：

<强> 1。使用子选择器（>）仅设置顶级段落的样式：

＆＃13;

/* All paragraphs inherit these styles */
.entry p {
    margin: .85em auto;
    line-height: 1.7;
}
/* Only the top level paragraphs get text indent */
.entry > p {
    text-indent: 1.5em;
}

＆＃13;

<div class="entry">
    <p>Outer paragraph section</p> 
    <blockquote>
        <p>Inner paragraph section</p>
    </blockquote>
</div>

＆＃13;

<强> 2。使用后代选择器设置所有段落的样式，然后覆盖内部段落样式：

＆＃13;

/* All paragraphs inherit these styles */
.entry p {
    margin: .85em auto;
    line-height: 1.7;
    text-indent: 1.5em;
}
/* Override/Reset the text-indent property of inner paragraphs */
.entry blockquote p {
    text-indent:0;
}

＆＃13;

<div class="entry">
    <p>Outer paragraph</p> 
    <blockquote>
        <p>Inner paragraph</p>
    </blockquote>
</div>

＆＃13;

CSS不在标签内

2 个答案:

有两种方法可以做到这一点：