标签在斜体上下文中生成非斜体文本

Question

我已经设计了h4标签，使用斜体字体造型font-style: italic;。工作良好。

在标题中，我有时会强调使用em标记的单词。

当发生这种情况时，我希望强调的单词以非斜体字体呈现，以区别于周围的文本。

我有什么选择？

需要明确的是，当在em标题之外使用h4时（使用非斜体文本），它应该使文本斜体。

只有当周围的文字是斜体时，我才希望em表现得与众不同。我更倾向于使用HTML和全局CSS属性来做到这一点。

基本哲学是这样的：em应该通过使文本与周围的文本不同来引起对文本的注意。我不知道如何以对周围文本的上下文敏感的方式执行此操作。

我想知道是否有一种直截了当的方法。

Answer 1

这样做

h4 {
  font-style: italic
}

h4 em {
  font-style: normal /* initial */
}

<h4>hey text italic by CSS</h4>
<h4><em>hey text normal because <code>em</code> is here</em></h4>
<em>hey text by default tag</em>

Answer 2

这是一个选项

h4 em{
  font-style:initial;
}

https://codepen.io/panchroma/pen/jmrgPb

Answer 3

CSS没有根据父元素的计算样式设置规则的机制。

您可以使用后代组合器，并明确表示您希望它与众不同：

h4 em { font-style: normal; }

或者您可以使用JavaScript并依次测试每个元素的父级...

function italic() {
    var em = document.querySelectorAll("em");
    em.forEach(function (em) {
       var parent = window.getComputedStyle(em.parentNode).fontStyle
       if (parent === "italic") {
           em.style.fontStyle = "normal";
       }
    });
}

addEventListener("DOMContentLoaded", italic);

h4 { font-style: italic; }

<h4>This is <em>em</em></h4>

<p>How <em>em can you get? You can <em>nest! So many <em>levels</em> deep</em>.</p>