css 尽管对祖先进行了声明，但子代不继承样式

svmlkihl 于 2022-12-27 发布在其他

关注(0)|答案(1)|浏览(88)

我在body上声明了display: inline，但是元素仍然以块的方式显示。请帮助我理解这个概念。
直接在li上声明display: inline的工作原理如下：它们将以内联方式显示，但为什么在body上声明时内联不适用于它们呢？

body {display: inline}

<body>
  <ul>
    <li>1234</li>
    <li>5678</li>
  </ul>
</body>

我也尝试过在li上使用display: inherit，但它仍然以块的方式显示，并且还删除了我不想要的标记：
一个二个一个一个

css

来源：https://stackoverflow.com/questions/74591932/children-dont-inherit-style-despite-declaration-on-ancestor

1条答案

按热度按时间

a0x5cqrl1#

继承`display`

在元素 * 上设置display将不会 * 让其子元素继承该值：

.wrapper {display: inline}

<div class="wrapper">
  <div>First text.</div>
  <div>Second text.</div>
</div>

虽然你可以声明元素从它们的祖先继承display，但我不推荐这样做（一般来说）：

声明元素以继承display与声明特定的display值一样需要声明。
如果选择器太不具体，那么具有合理默认值的元素将丢失这些值。

为你的用例选择好的选择器是很重要的。对于你的简短例子来说，有一个通用的选择器是很好的，比如body *（用文字来说："BODY的所有后代"），它使用universal selector *和descendant combinator ``。

- 注意：**使用组合符通常 * 不会 * 选择"子选择"本身，例如选择器body *的BODY将 * 不会 * 被选择。还要注意descendant combinator没有child combinator >那么具体。

下面是一个类似的例子：
一个二个一个一个
但是如果您仍然希望将元素声明为 * inherit * display，下面是一个示例：

.wrapper {display: inline} /*Set the value to inherit*/
.wrapper * {display: inherit}

<div class="wrapper">
  <div>First text.</div>
  <div>Second text.</div>
</div>

列表和`display`

列表的默认值display是block，其子列表（LI）的值是list-item.如果你只是想去掉标记，那么声明列表list-style-type: none：

ul {list-style-type: none}

<ul>
  <li>First item.
  <li>Second item.
</ul>

但是您也可以将列表及其子列表（ul, ul>*）声明为display: inline，注意删除填充需要另一个声明。

ul, ul>* {display: inline}

<ul>
  <li>First item.
  <li>Second item.
</ul>

带标记的内联列表

如果您想使用标记内联列表项，有几种可能性：
您可以通过声明list as display: inline-flex来保留内联列表项的::marker。

- 旁注：**::marker默认为列表项的outside，这意味着它们可能会阻碍其他框的查看。将列表（或其项）声明为list-style-position: inside以将标记保留在列表项的框内，从而防止此类溢出。
- 注意**flex-wrap: nowrap是默认值，这与常规文本流不同。使用flex-wrap: wrap可以使列表项（及其内容）像常规文本一样流动：

一个10块一个11块一个12块一个
您还可以通过::beforepseudo-element使用自定义"标记"。

- 旁注：**使用custom-styled CSS counter，您可以重新创建例如list-style-type: georgian计数器：

一个一个三个一个一个

列表项不继承`display`？

您询问了为什么以下操作不会导致LI继承BODY的display值：

body {display: inline}
li {display: inherit}

<body>
  <ul>
    <li>First item.
    <li>Second item.
  </ul>
</body>

这是因为-虽然BODY * 是 * 声明为display: inline-但两者之间的列表具有默认的display值block。因为继承是从元素的直接祖先发生的，所以列表项将从列表继承值block。

可访问性问题

列表是语义元素，默认情况下由浏览器解释为语义元素。但是更改列表的样式可能会更改浏览器解释列表的方式，从而可能将列表的语义降低为包含文本的通用元素。
因此，通过ARIA-attribute role将列表及其项分别声明为list和listitem，通常可以确保列表被解释为列表。这会 * 否决 * 浏览器将元素解释为列表的决定，即使浏览器由于某些CSS而决定不将其解释为列表。
另一点是伪元素（例如::marker，::before）在技术上不是文档的一部分，因此不能与之交互（例如selecting or copying）。如果你需要它们作为文档的一部分，那么就直接将它们包含在文档中。

赞(0）回复(0）举报 2022-12-27

我来回答

css 尽管对祖先进行了声明，但子代不继承样式

1条答案

继承`display`

列表和`display`

带标记的内联列表

列表项不继承`display`？

可访问性问题

相关问题

热门标签

最新问答

css 尽管对祖先进行了声明，但子代不继承样式

1条答案

继承display

列表和display

带标记的内联列表

列表项不继承display？

可访问性问题

相关问题

热门标签

最新问答

继承`display`

列表和`display`

列表项不继承`display`？