将另一个元素样式化为伪元素第一行

Question

我正在使用伪元素来设置文档中段落第一行的样式 (class="first-para"):

.first-para::first-line {
  font-weight: bold;
  font-size: calc(var(--fontSize) * 1.25);
}

是否可以在第一行中有一个 link 元素来使用伪样式，即除了其 link 样式外，还使用粗体和更大的字体大小？我无法将相同的样式直接分配给 link，因为在宽度较小的屏幕上，link 不会位于第一行。这是当前的尝试：article

Answer 1

您的 CSS 中有此规则，它也会影响您第一行中的 a link 元素：

p, li, b, i, a, mark {
    font-size: var(--fontSize);
    line-height: var(--lineHeight);
    letter-spacing: var(--letterSpacing);
    font-feature-settings: normal;
}

因此，为避免影响 .first-para 段落中的 a 元素，create/add .first-para a 的规则使用 inherit 重置这些设置对于所有值：

.first-para a {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-feature-settings: inherit;
}

将另一个元素样式化为伪元素第一行

Styling an element within another styled as a pseudo element first-line

html

css

css-selectors

css-specificity