html - 使用 CSS 定位文本节点

Question

我正在为一个容器对象编写 CSS。我大部分时间都在工作。具体来说，我正在查看测试用例 1、2 和 3。它们都有文本节点。有没有办法像对待任何子元素一样对待文本节点？

有什么方法可以调整 CSS 以使文本节点及其兄弟节点正常工作吗？除非有一个 CSS 选择器可以使用，它会选择一个 .container ，如果有的话，只有当有一个文本节点时，我才能 display: none 它(或者更好但更好的东西仍然让开发人员知道事情不正常)？

这是一个Codepen

code,
p,
quote {
  display: block;
  position: relative;
  margin: 0;
  padding: 1em;
  border: 1px solid black;
  box-sizing: border-box;
}
code {
  background-color: #ccc;
}
p {
  background-color: #0df;
}
quote {
  background-color: #fd0;
}
quote::after {
  display: table;
  clear: both;
  content: "";
}
.hidden {
  display: none;
}
.third {
  height: 100%;
  width: 33%;
  float: left;
  border: 1px solid black;
}
.container {
  display: block;
  position: relative;
  margin-right: 0;
  margin-left: 0;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding: 0.5rem;
  border: 1px solid black;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: none;
}
.container >:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-width: 0;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.container >:last-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-width: 0;
  border-left-width: 0;
  border-right-width: 0;
  margin-top: 0.5rem;
  margin-bottom: -0.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.container >:not(:first-child):not(:last-child) {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  margin-bottom: -0.5rem;
  border-right-width: 0;
  border-left-width: 0;
  border-bottom-width: 0;
}
.container >:only-child {
  border-radius: 10px;
  border-width: 0;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

<p>p</p>
<br />
<code>code</code>
<br />
<quote>quote</quote>

<div id="0" class="container">
  text
</div>

<div id="1" class="container">
  <p>first child</p>
  text
  <code>last child</code>
</div>

<div id="2" class="container">
  <p>first child</p>
  text
</div>

<div id="3" class="container">
  text
  <p>last child</p>
</div>

<div id="4" class="container">
  <p>first child</p>
  <code>last child</code>
</div>

<div id="5" class="container">
  <code>first child</code>
  <p>last child</p>
</div>

<div id="6" class="container">
  <code>first child</code>
  <code>last child</code>
</div>

<div id="7" class="container">
  <p>first child</p>
  <p>last child</p>
</div>

<div id="8" class="container">
  <code>only child</code>
</div>

<div id="9" class="container">
  <p>first child</p>
  <quote>middle child</quote>
  <quote>middle child</quote>
  <p>last child</p>
</div>

<div id="10" class="container">
  <quote>
    <div class="third">1</div>
    <div class="third">2</div>
    <div class="third">3</div>
  </quote>
</div>

<div id="11" class="container">
  <quote class="hidden">hidden child</quote>
  <p>first child</p>
  <p>last child</p>
</div>

<div id="12" class="container">
  <p>first child</p>
  <p>last child</p>
  <quote class="hidden">hidden child</quote>
</div>

Answer 1

只有包裹在 HTML 标签中的文本才能被 CSS 定位。

未明确由 HTML 标记包裹的文本由匿名框算法包裹。这些框可以继承样式，但它们不能被 CSS 定位。

来自规范:

9.2.1.1 Anonymous block boxes

The properties of anonymous boxes are inherited from the enclosing non-anonymous box. Non-inherited properties have their initial value.

如果无法在匿名文本周围添加 HTML 标记，请考虑在容器上设置文本样式。对于可以定位的元素，您可以覆盖容器样式。当然，如果您希望文本具有 display: none，此方法将失效。