Question

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

Delegate

我尝试了以下语法，但它不起作用。

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

我哪里错了？

Answer 1

附加到元素p:not(strong)的伪类从那些附加到其中的元素中选择＆＃39; （这里是p）;并且元素总是而不是元素;因此，此选择器将始终匹配每个元素。

您似乎尝试根据其子元素设置父{name}}元素的样式，因为CSS没有父选择器（请参阅：＆＃34; {{3} }＆＃34）

您可以将一个类（或其他属性）添加到元素，并在选择器中使用它：

<p>

风格与：

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

＆＃13;

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

＆＃13;

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

＆＃13;

或者，使用A paragraph with no child elements Local: -Brasília/DF属性：

data-*

风格与：

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

＆＃13;

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

＆＃13;

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

＆＃13;

另外，如果你在A paragraph with no child elements Local: -Brasília/DF之后将的内容包装在他们自己的元素中，你可以使用否定选择器设置段落的后代的样式：

<strong>

样式：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

另外两种方法，假设您想要在A paragraph with no child elements Local: -Brasília/DF 元素之外设置子项的文本样式（最简单）：

<strong>

＆＃13;

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

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

＆＃13;

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

＆＃13;

一个稍微复杂的版本，使用CSS生成的内容：

＆＃13;

<p>A paragraph with no child elements</p>

<p><strong>Local:</strong>
  <br>-Brasília/DF</p>

＆＃13;

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

＆＃13;

参考文献：

Is there a CSS parent selector?。

Answer 2

这不是:not()伪类的工作原理。它匹配一个未由参数表示的元素。

因此，在这种情况下，要选择p而不是strong标记的文字，您可以在span中包含文字的其他部分，然后选择p的所有子项但不是strong喜欢这个

p :not(strong) {
  color: blue;
}

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

其他选项是简单地选择p的文字，然后使用默认样式覆盖strong标记。

p {
  color: blue;
}
p strong {
  color: black;
}

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

Answer 3

除了强标签之外的任何东西都会使用CSS。像：

.just_this :not(strong){
  color:blue;
  }

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

替代方案（只需使用child-combinator '>'）：

.just_this{
  color:blue;
}

.just_this>strong{
  color:black;  
}

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

：not（）选择器不选择元素

3 个答案: