在另一个样式中设置一个元素的样式作为伪元素的第一行

【问题标题】：Styling an element within another styled as a pseudo element first-line在另一个样式中设置一个元素的样式作为伪元素的第一行
【发布时间】：2021-04-25 09:57:44
【问题描述】：

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

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

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

【问题讨论】：

标签： html css css-selectors css-specificity

【解决方案1】：

你的 CSS 中有这条规则，它也会影响第一行中的 a 链接元素：

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 元素，请为.first-para a 创建/添加一条规则，通过对所有值使用inherit 来重置这些设置：

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

【讨论】：