Select all elements but not in parent with specific class

Question

I have following scenario and I can't figure out how to select all p elements but not in div with content class:

<div class="content">
  <p></p> <!-- not this one -->
  <p></p> <!-- not this one -->
  <div>
   <p></p> <!-- not this one because this is also inside content -->
  </div>
</div>

<div class="other">
  <p></p> <!--this one -->
</div>
<p></p> <!--this one -->

So I just want to select all p elements but not elements inside element with class="content".

More info: I have application that content is dynamically generated. In this content there are some p elements that I don't want to apply the styles.

Some brilliant developer add this kind of style in the beginning of the project:

p {
  color: #333;
  font-size: 12px!important;
  line-height: 18px!important;
  margin: 0!important;
}

So as You see this applies to all p elements. My task is to fix only content rendering so it will have different font-size etc... So I though I will change p selector to exclude those inside content class. If I change this definition of p css style then I can unintentionally change some other subpage so I don't want to mess with that because I just want to make it fast without going deep into the code and html created by this developer. The rest of the page is working fortunately very well but I don't know how to nail all those elements in content class only and leaving the rest of p elements as it was untouched.

Answer 1

You can select all p tags and then add a CSS style to the ones that you don't want to select, in this case .content p.
See below code with this idea.

但是，如果可能的话，将一个公共类添加到p您想要选择的类别中，或者将一个公共类添加到您不想选择的类别中p，这将更加可控。

编辑
由于您编辑了说明您已p使用!important值设置样式且不希望更改的问题，因此我在此处进行了修改以尝试修复p其中的内容.content。您也需要强制将其!important修改为unset（或您想要的其他值）检查值：

p {
  color: #333;
  font-size: 12px !important;
  line-height: 18px !important;
  margin: 0 !important;
}

.content p{
  color: unset !important;
  font-size: initial !important;
  line-height: 25px !important;
  margin: initial !important;
}

<div class="content">
  <p>1</p>
  <!-- not this one -->
  <p>2</p>
  <!-- not this one -->
  <div>
    <p>3</p>
    <!-- not this one because this is also inside content -->
  </div>
</div>

<div class="other">
  <p>4</p>
  <!--this one -->
</div>
<p>5</p>
<!--this one -->