css sibling选择器帮助Markdown样式表需要 [英] css sibling selector help needed for Markdown stylesheet

问题描述

我使用的是具有以下CSS的标记编辑器的CSS样式表。

I am using a CSS stylesheet from a markdown editor that has the following CSS.

p strong {
font-size: larger;
}

在渲染的HTML中，标题总是采用

In the rendered HTML the titles that are always in the form

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

例如

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

然后，我有一些粗体字的常见段落表示为：

And then the usual paragraphs that i have some words in bold are represent as:

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

我想更改或编辑CSS，以便只有< p>< strong>标题< / strong>< / p> 的文字以不同的颜色显示。

I would like to change or edit the CSS so that only the text within the <p><strong>title</strong></p> has it's text shown in a different color.

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

Can anyone help with the needed CSS please. I tried various sibling selector combinations but nothing worked. Often in Chrome dev tools the stuff i tried like p+strong {color: red;} was grayed out and has no effect.

非常感谢。

推荐答案

这不是一个兄弟选择器， https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectorsrel =nofollow>子选择器

This is not a sibling selector, but a (direct) child selector

As例如，您应该使用：

As such, you should use:

p> strong

>组合器分隔两个选择器，仅匹配由第二个选择器匹配的
元素它们是
元素的直接子元素，与第一个匹配。相反，当两个选择器是
与后代选择器组合时，组合的选择器
表达式匹配那些由第二选择器匹配的元素
，其存在由第一选择器匹配的祖先元素，
，而不考虑DOM的跳数。

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 元素在 p

A sibling selector is one which identifies DOM nodes at the same level which follow one another. Here your strong element is within your 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>

这篇关于css sibling选择器帮助Markdown样式表需要的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！