问题描述
我正在处理容器对象的CSS。我有它大多工作。具体来说,我在看测试用例1,2和3.它们都有文本节点。是否有一种方法来处理文本节点就像任何子元素?
I'm working on the CSS for a container object. I have it mostly working. Specifically, I'm looking at test case 1, 2 and 3. They all have text nodes. Is there a way to treat a text node just like any child element?
有什么方法来调整CSS以获得文本节点和其兄弟姐妹工作很好吗?除非这里有一个CSS选择器,如果有一个文本节点,所以我可以 display:none .container
/ code> it(或者更好,但仍然让dev知道事情不工作)?
Is there any way to tweak the CSS to get text nodes and its siblings to work nicely? Barring that is there a CSS selector to use that will select a .container
if any only if there is a text node so I can display: none
it (or something nicer but still to let the dev know things aren't working)?
这是一个。
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>
b
推荐答案
只有包含在HTML标签中的文本可以由CSS定位。
Only text that is wrapped in HTML tags can be targeted by CSS.
未由HTML标签显式包装的广告素材在算法上由匿名框包装。这些框可以继承样式,但不能被CSS定位。
Your text that is not explicitly wrapped by HTML tags is algorithmically wrapped by anonymous boxes. These boxes may inherit styles, but they cannot be targeted by CSS.
根据规格:
匿名框的属性继承自包含
非匿名框的属性。
The properties of anonymous boxes are inherited from the enclosing non-anonymous box. Non-inherited properties have their initial value.
如果在您的匿名文本周围添加HTML标签不是一个选项,请考虑设置文本样式在容器上。对于可以定向的元素,您可以覆盖容器样式。当然,如果您希望文本具有 display:none
,此方法将会失败。
If adding HTML tags around your anonymous text is not an option, consider setting the text styles on the container. For the elements that can be targeted, you can then override the container styles. Of course, this method will fall flat if you want the text to have display: none
.
这篇关于使用CSS定位文本节点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!