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

Question

我正在使用来自降价编辑器的 CSS 样式表，它具有以下 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>

Answer 2

请参阅下面的代码笔示例

http://codepen.io/jmonit/pen/wBrWgW

Lorem Ipsum 只是印刷和排版行业的虚拟文本。 自 1500 年代以来，Lorem Ipsum 一直是行业的标准虚拟文本，当时一位不知名的印刷商拿走了一个活字样，并把它打乱成一本样书。它不仅经历了五个世纪，而且经历了 电子排版的飞跃，基本保持不变。它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 工作表的发布而流行，最近随着桌面出版软件如 Aldus PageMaker 的发布而流行，其中包括 Lorem Ipsum 的版本。

p strong{ color:red; font-size: larger; }

您使用的 css 与更改颜色没有任何不同吗？在 link 中，我使用降价代码生成段落和强标签。让我知道这是否有帮助。

Answer 3

正如 SW4 所提到的，您使用同级选择器的方式是不正确的，因为 strong 元素是 p 的 children元素，而不是兄弟姐妹。换句话说，strong 元素由 p > strong 表示，而不是 p + strong.

您似乎希望在

时以不同方式设置 strong 元素的样式

它是此 p 中唯一的 strong 元素，并且
所有文本都包含在此 strong 元素中； p.

第一部分可以使用 p > strong:only-child 或 p > strong:only-of-type 来实现。但是因为 text nodes and other non-element nodes are always ignored by structural pseudo-classes，这也会针对此示例中的元素：

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

您可能不想要。不幸的是，由于这个原因，第二部分不能仅使用 CSS 选择器来完成。

正如我在评论中提到的，您只需将章节标题放在适当的标题元素 which Markdown supports 中并定位这些标题，就可以很容易地避免所有这些情况。但是如果你的 Markdown 实现不出于某种原因支持标题，或者你不能修改 Markdown 内容，那么你可能会倒霉，除非你写一个脚本来检测这些元素并给它们 class 名称或将它们换成实际标题 on-the-fly.

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

css sibling selector help needed for Markdown stylesheet

css

css-selectors