时间戳

首页 > 解决方案 > 在另一个样式中设置一个元素的样式作为伪元素的第一行

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

问题描述

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

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

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

标签： htmlcsscss-selectorscss-specificity

解决方案

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

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

因此，为避免影响段落a中的元素，请.first-para创建/添加一个规则，通过使用所有值.first-para a来重置这些设置：inherit

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

推荐阅读