使用CSS

时间：2016-07-19 04:10:30

标签： html css css3 css-selectors

我正在处理容器对象的CSS。我有它主要工作。具体来说，我正在查看测试用例1,2和3.它们都有文本节点。有没有办法像处理任何子元素一样处理文本节点？

有没有办法调整CSS以使文本节点及其兄弟节点工作得很好？除非有一个CSS选择器要使用，如果只有文本节点，我会选择一个.container，所以我可以display: none它（或更好的东西，但仍然让开发者知道事情不是＆＃ 39;工作）？

这也是Codepen。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：3)

CSS只能定位HTML标记中包含的文本。

未经HTML标记明确包装的文本由匿名框按算法包装。这些框可以继承样式，但CSS不能将它们作为目标。

来自规范：

  

9.2.1.1 Anonymous block boxes

     

匿名框的属性继承自封闭   非匿名框。非继承属性具有初始值。

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

答案 1 :(得分：0)

在这种情况下，我很想将每个文本节点放在<span>内，这是经典的非语义短语元素。

（参见： http://www.w3.org/TR/html-markup/span.html）

然后，您可以采用与span和p样式相似的方式设置code的样式。

如果选择此方法，则有两种选择。你可以：

1）将spans直接写入标记：

＆＃13;
＆＃13; 
code, p, quote, span {
  display: block;
  position: relative;
  margin: 0;
  padding: 1em;
  border: 1px solid black;
  box-sizing: border-box;
}

p {background-color: #0df;}
code {background-color: #ccc;}
span {background-color: #fff;}


.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;
}
＆＃13; 
<div id="container-1" class="container">
<p>first child</p>
<span>text</span>
<code>last child</code>
</div>

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

<div id="container-3" class="container">
  <span>text</span>
  <p>last child</p>
</div>
＆＃13;
＆＃13;
＆＃13;

或者，如果您不希望标记中包含spans，则可以

2）在页面加载后动态添加span元素：

＆＃13;
＆＃13; 
var containers = document.getElementsByClassName('container');

for (var i = 0; i < containers.length; i++) {
    for (var j = 0; j < containers[i].childNodes.length; j++) {
        if (containers[i].childNodes[j].nodeName !== '#text') {continue;} /* skips all nodes which aren't text nodes */
        if (/^[\s\n]*$/.test(containers[i].childNodes[j].textContent)) {continue;} /* skips all text nodes containing only whitespace and newlines */

        var text = containers[i].childNodes[j];
        var span = document.createElement('span');
        span.appendChild(text);
        span.textContent = span.textContent.trim();
        containers[i].insertBefore(span,containers[i].childNodes[j]);
    }
}
＆＃13; 
code, p, quote, span {
  display: block;
  position: relative;
  margin: 0;
  padding: 1em;
  border: 1px solid black;
  box-sizing: border-box;
}

p {background-color: #0df;}
code {background-color: #ccc;}
span {background-color: #fff;}


.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;
}
＆＃13; 
<div id="container-1" class="container">
<p>first child</p>
text
<code>last child</code>
</div>

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

<div id="container-3" class="container">
text
<p>last child</p>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题