如何设置段落中不是链接的每个首字母的样式

Question

我目前使用以下代码为标题3后面的段落的每个第一个字母设置样式，以使它们脱颖而出：

.someClass h3+p:first-letter{
    font-size: 2em;
}

现在，我想从选择中排除所有链接（＆＃34; a＆＃34; -tags）。我查看了.not（）选择器，但是

.someClass h3+p:not(a):first-letter{
    font-size: 2em;
}

无效。

任何建议将不胜感激！谢谢。

Answer 1

通过以英语分解您当前的选择器来进行调试： .someClass h3+p:not(a):first-letter

• .someClass h3 - 选择.someClass元素
中的h3元素
• .someClass h3+p - 在.someClass
内的h3之后立即选择p元素
• .someClass h3+p:not(a) - 选择不是锚元素的p元素 -

我们可以在那里停留 - <p>元素永远不会是<a>，因为元素不能有多个标记。由于您实际上试图影响<a>内<p>，:not()选择器不适用于此处。

幸运的是，还有另一个解决方案 - 一点开箱即用的解决方案：如果您更改有问题的<a>元素，使<p>成为块级元素（使用display: inline-block保留预期的布局），他们不再受父母first-letter规则的影响。

这是如何运作的：

＆＃13;

＆＃13;

.someClass h3+p:first-letter {
  font-size: 2em;
}

.someClass h3+p a:first-child {
  display: inline-block;
}

＆＃13;

<div class="someClass">
  <h3>H3</h3>
  <p>Paragraph Text</p>

  <h3>H3</h3>
  <p><a href="#">Paragraph</a> Text</p>
</div>

＆＃13;

＆＃13;

＆＃13;