Question

我需要将样式添加到具有相同类型的重复父元素的HTML代码元素。

实施例： <code><code><code>foo</code></code></code>

我只想将样式应用于其中一个元素，例如code { padding: 1px; }实际上在此示例中导致3px。

我无法控制生成的HTML，有时也只能有一个父代码元素。

是否可以编写一个忽略父元素的CSS规则，并且只针对那些元素？

Answer 1

如果您知道嵌套级别的数量

如果您知道嵌套元素的深度，则可以使用子组合子>。

>选择器＆＃39;仅匹配第二个选择器匹配的元素，这些元素是第一个＆＃39;匹配的元素的子元素。

＆＃13;

code > code > code {
  border: 1px solid #000000;
  padding: 5px;
}

＆＃13;

<code><code><code>foo</code></code></code>

＆＃13;

如果您不知道嵌套级别的数量

目前唯一有效的选项是定位顶级code元素以进行样式设置，然后从任何嵌套的code元素中删除样式。

＆＃13;

code {
  border: 1px solid #000000;
  padding: 5px;
}

code code {
  padding: 0;
  border: 0;
}

＆＃13;

<code>foo</code>

<code><code>foo</code></code>

<code><code><code>foo</code></code></code>

<code><code><code><code>foo</code></code></code></code>

＆＃13;

将来

实施CSS选择器级别4后，您将能够使用:has伪类，例如：

code:not(:has(> code))

示例（此时在任何浏览器中都无法运行）：

＆＃13;

code:not(:has(> code))  {
  border: 1px solid #000000;
  padding: 5px;
}

＆＃13;

<code><code>foo</code></code>

<code><code><code>foo</code></code></code>

＆＃13;

Answer 2

根据你问题（我无法控制此HTML，因为它有时也只能有一个父代码元素。）

我们可以使用选择器>删除<code>标记的样式，并仅将填充应用于第一个<code>。检查演示，我希望它有用，顺便说一句，没有办法编写一个忽略父元素的CSS规则，只针对那个，所以必须使用这样的解决方法。 < / p>

＆＃13;

code {
  padding: 1px
}

code>code {
  padding: 0px
}

code>code>code {
  padding: 0px
}

＆＃13;

<code>
 <code>
  <code>foo</code>
 </code>
</code>

<code>
 <code>foo</code>
</code>

<code>foo</code>

＆＃13;

Answer 3

如果您知道code代码的深度：

code > code > code {
   padding: 1px;
}

Answer 4

您可以使用选择器＆＃34;＆gt;＆＃34;在这里：https://www.w3schools.com/cssref/sel_element_gt.asp

在你的例子中会是这样的：

code > code > code{
    padding:1px;
}

CSS忽略相同类型的父元素

4 个答案:

如果您知道嵌套级别的数量

如果您不知道嵌套级别的数量

将来