:not()选择器不选择元素

Question

我有以下字符串,我想使用css选择器忽略字符串中的强标记:

<p><strong>Local:</strong><br>
-Brasília/DF </p>

我尝试了以下语法,但它不起作用.

p:not(strong)

我哪里错了？

Answer 1

附加到元素的伪类p:not(strong)从它们"附加" 的元素中选择(这里是p); 和<p>元件是总是不是一个<strong>元件; 因此,此选择器将始终匹配每个<p>元素.

您似乎试图<p>根据其子<strong>元素设置父元素的样式,因为CSS没有父选择器(请参阅:" 是否有CSS父选择器？ ")

相反,您可以向<p>元素添加一个类(或其他属性),并在选择器中使用它:

<p class="hasStrongDescendant"><strong><strong>Local:</strong><br>
-Brasília/DF </p>

和风格:

p:not(.hasStrongDescendant) {
    /* CSS here */
}

p:not(.hasStrongDescendant) {
  color: orange;
}

<p>A paragraph with no child elements</p>

<p class="hasStrongDescendant"><strong>Local:</strong>
  <br>-Brasília/DF</p>

或者,使用data-*属性:

<p data-hasChild="strong"><strong>Local:</strong><br>
-Brasília/DF </p>

和风格:

p:not([data-hasChild="strong"]) {
    /* CSS here */
}

p:not([data-hasChild="strong"]) {
  color: #f90;
}

<p>A paragraph with no child elements</p>

<p data-hasChild="strong"><strong>Local:</strong>
  <br>-Brasília/DF</p>

另外,如果你包裹的内容<p>,下面的<strong>,自己的元素里,你可以使用样式否定选择段落的后裔:

<p>A paragraph with no child elements</p>

<p><strong>Local:</strong>
  <br><span>-Brasília/DF</span>
</p>

造型:

p :not(strong) {
  /* note the space between the
     'p' and the ':not()' */
  color: #f90;
}

p :not(strong) {
  color: #f90;
}

<p>A paragraph with no child elements</p>

<p><strong>Local:</strong>
  <br><span>-Brasília/DF</span>
</p>

另外两种方法,假设您想要在<strong>元素之外设置子项的文本样式(最简单):

/* define a colour for the <p>
   elements: */
p {
  color: #f90;
}

/* define a colour for the <strong>
   elements within <p> elements: */    
p strong {
  color: #000;
}

p {
  color: #f90;
}
p strong {
  color: #000;
}

<p>A paragraph with no child elements</p>

<p><strong>Local:</strong>
  <br>-Brasília/DF</p>

还有一个稍微复杂的版本,使用CSS生成的内容:

p {
  color: #f90;
}
p[data-label]::before {
  content: attr(data-label) ': ';
  color: #000;
  display: block;
  font-weight: bold;
}

<p data-label="Local">-Brasília/DF</p>

参考文献:

• CSS否定伪类(:not()).