我正在研究容器对象的 CSS。我大部分时间都在工作。具体来说，我正在查看测试用例 1、2 和 3。它们都有文本节点。有没有办法像对待任何子元素一样对待文本节点？
有什么方法可以调整 CSS 以使文本节点及其兄弟节点正常工作吗？除非有一个 CSS 选择器可以用来选择一个.container如果有的话，只有当有一个文本节点时，我才能display: none它（或者更好的东西，但仍然让开发人员知道事情不起作用）？
这里有一个Codepen http://codepen.io/anon/pen/GqQQrN以及。
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>
CSS 只能定位包含在 HTML 标签中的文本。
未用 HTML 标记显式包装的文本将通过算法进行包装匿名箱。这些框可能继承样式，但它们不能被 CSS 定位。
从规格来看：
9.2.1.1 匿名区块
盒子 https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level
匿名盒子的属性继承自封闭盒子
非匿名盒子。非继承属性有其初始值。
如果无法在匿名文本周围添加 HTML 标签，请考虑在容器上设置文本样式。对于可以定位的元素，您可以覆盖容器样式。当然，如果你想让文本具有display: none.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
