代码之家 › 专栏 › 技术社区 › John Doe

如何用CSS在一个div中选择第三行文本?[副本]

css-selectors css3 html5 css html

John Doe · 技术社区 · 6 年前

我正在研究容器对象的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>

0 回复 | 直到 9 年前

Michael Benjamin William Falcon 9 年前

只有包装在HTML标记中的文本才能被CSS作为目标。

匿名框 . 这些框可以继承样式,但CSS不能将它们作为目标。

9.2.1.1 Anonymous block boxes

匿名框的属性继承自非匿名框。非继承属性有其初始值。

display: none .

Rounin 9 年前

在这种情况下,我会尝试将每个文本节点放在 <span> 它是经典的非语义短语元素。

见: http://www.w3.org/TR/html-markup/span.html )

然后你就可以设计 span p 以及 code .

1) 写下 spans 直接进入标记:

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;
}

<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>

跨度 包含在标记中,可以

2) 添加在页面加载后动态地加载元素:

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]);
    }
}

代码,p,引用,范围{
显示:块;
边距:0;
边框:1px纯黑;
框大小:边框框;

p{背景色:#0df;}
代码{背景色:#ccc;}


.容器{
显示:块;
右边距:0;
左边距:0;
下缘:1.5em;
填充:0.5rem;
框大小:边框框;
盒影:无;

.容器:第一个子容器{
边框左上半径:10px;
边框右上半径:10px;
边框右下半径:0;
边框宽度:0;
底部边距:-0.5rem;
左边距:-0.5rem;
右边距:-0.5雷姆;
}
.container>:最后一个子级{
边框左上半径:0;
边框右上半径:0;
边框右下半径:10px;
边框左宽度:0;
边缘顶部:0.5rem;
底部边距:-0.5rem;
右边距:-0.5雷姆;
}
.container>:不(:第一个子项):不(:最后一个子项){
左边距:-0.5rem;
底部边距:-0.5rem;
边框右侧宽度:0;
边框底部宽度:0;
}
.container>:仅限子级{
边界半径:10px;
边框宽度:0;
上边距:-0.5rem;
左边距:-0.5rem;
右边距:-0.5雷姆;
}

<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>