Markdown 样式表所需的 css 兄弟选择器帮助

Question

我正在使用来自具有以下 CSS 的 Markdown 编辑器的 CSS 样式表。

p strong {
font-size: larger;
}

在呈现的 HTML 中，标题始终采用

<p><strong>title</strong></p>

例如

<p><strong>Example of adding a new persistent rule</strong></p>

然后我用粗体表示的常用段落表示为:

<p> text text text <strong>red text</strong> text text <strong>red tezt</strong></p>

我想更改或编辑 CSS，以便只有 <p><strong>title</strong></p> 内的文本它的文本以不同的颜色显示。

任何人都可以帮助提供所需的 CSS。我尝试了各种兄弟选择器组合，但没有任何效果。通常在 Chrome 开发工具中，我尝试过类似 p+strong {color: red;} 的东西变灰，没有任何效果。

非常感谢。

Answer 1

这不是兄弟选择器，而是(直接)child selector

因此，您应该使用:

p > strong

The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first. By contrast, when two selectors are combined with the descendant selector, the combined selector expression matches those elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of "hops" up the DOM.

兄弟选择器是一种标识同一级别的 DOM 节点的选择器。这里你的 strong 元素是 within 你的 p

p + strong {
  text-decoration: underline; /* directly adjacent sibling (wont apply) */
}
p ~ strong {
  font-style: italic; /* adjacent sibling (wont apply) */
}
p > strong { /* (direct) child (applies) */
  color: red;
}

<p>text text text <strong>red text</strong> text text <strong>red tezt</strong>
</p>