我正在使用http://codepen.io/Idered/pen/AeBgF作为起点实现CSS读取更多/读取更少的功能。
我修改了它以解决<p>代码与<li>列表项目的关系。
以下是我的CSS版本：
input.read-more-state {
display: none;
}
p.read-more-target {
font-size: 0;
max-height: 0;
opacity: 0;
transition: .25s ease;
}
input.read-more-state:checked ~ div.read-more-wrap p.read-more-target {
font-size: inherit;
max-height: 999em;
opacity: 1;
}
input.read-more-state ~ label.read-more-trigger:before {
content: 'Read more';
}
input.read-more-state:checked ~ label.read-more-trigger:before {
content: 'Read less';
}
label.read-more-trigger {
cursor: pointer;
display: inline-block;
}
这是我的HTML：
<input class="read-more-state" id="read-more-controller" type="checkbox">
<div class="read-more-wrap">
<p>Lorem ipsum dolor sit amet...</p>
<p class="read-more-target">Lorem ipsum dolor sit amet...</p>
<p class="read-more-target">Lorem ipsum dolor sit amet...</p>
<p class="read-more-target">Lorem ipsum dolor sit amet...</p>
</div>
<label class="read-more-trigger" for="read-more-controller"></label>
如果您能发现与RM / RL实用程序冲突的内容，请告诉我。
答案 0 :(得分：7)
CodePen如何实现此行为？
演示中的代码所做的全部是根据正在检查或取消选中的复选框修改包装器max-height的{{1}}，同时这样做也会更改{{1}的内容}}。
现在让我们看一下CSS中用于帮助执行此操作的关键单个选择器：
div
label .read-more-state:checked ~ .read-more-wrap .read-more-target时，选择包含input的{{1}}元素，当包装器也是class = 'read-more-state'时复选框的兄弟（参考元素）。 class = 'read-more-target'
class = 'read-more-wrap'的默认文本的那个。它的作用是将.read-more-state ~ .read-more-trigger:before设置为＆＃34;显示更多＆＃34; ，label content元素::before label也是复选框的兄弟。 class = 'read-more-trigger'
label文本的文件。选择器意味着当.read-more-state:checked ~ .read-more-trigger:before label为input时，将元素前面的标签class = 'read-more-state'设置为＆＃34;显示更少＆ ＃34; 另请注意:checked标记中的content属性。此字段的值指向for标记的label，因此无论何时单击标签，id元素的状态都会自动切换。无论input和input元素在DOM中的位置如何，都会发生这种情况。
labelinput
为什么我的代码不起作用？
CSS选择器只有在DOM中的引用元素之后/之下存在时才能选择兄弟元素。在您的代码段中，需要选择的.read-more-state {
display: none;
}
.read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.read-more-state ~ .read-more-trigger:before {
content: 'Show more';
}
.read-more-state:checked ~ .read-more-trigger:before {
content: 'Show less';
}
.read-more-trigger {
cursor: pointer;
display: inline-block;
padding: 0 .5em;
color: #666;
font-size: .9em;
line-height: 2;
border: 1px solid #ddd;
border-radius: .25em;
}
/* Other style */
body {
padding: 2%;
}
p {
padding: 2%;
background: #fff9c6;
color: #c7b27e;
border: 1px solid #fce29f;
border-radius: .25em;
}出现在<div>
<input type="checkbox" class="read-more-state" id="post-1" />
<p class="read-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="read-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span>
</p>
<label for="post-1" class="read-more-trigger"></label>
</div>
<div>
<input type="checkbox" class="read-more-state" id="post-2" />
<ul class="read-more-wrap">
<li>lorem</li>
<li>lorem 2</li>
<li class="read-more-target">lorem 3</li>
<li class="read-more-target">lorem 4</li>
</ul>
<label for="post-2" class="read-more-trigger"></label>
</div>（它是参考元素且其状态触发操作）之后，因此CSS无法选择它。没有选择导致没有应用属性更改。
divinput
如何解决此问题？
只需将input.read-more-state {
display: none;
}
p.read-more-target {
font-size: 0;
max-height: 0;
opacity: 0;
transition: .25s ease;
}
input.read-more-state:checked ~ div.read-more-wrap p.read-more-target {
font-size: inherit;
max-height: 999em;
opacity: 1;
}
input.read-more-state ~ label.read-more-trigger:before {
content: 'Read more';
}
input.read-more-state:checked ~ label.read-more-trigger:before {
content: 'Read less';
}
label.read-more-trigger {
cursor: pointer;
display: inline-block;
}标记移到包装<div class="read-more-wrap">
<p>Lorem ipsum dolor sit amet...</p>
<p class="read-more-target">Lorem ipsum dolor sit amet...</p>
<p class="read-more-target">Lorem ipsum dolor sit amet...</p>
<p class="read-more-target">Lorem ipsum dolor sit amet...</p>
</div>
<input class="read-more-state" id="read-more-controller" type="checkbox">
<label class="read-more-trigger" for="read-more-controller"></label>标记上方，标记单击时需要更改input。这样做意味着引用元素现在位于需要选择和设置样式的元素之上。因此，CSS将能够正确应用div并显示隐藏的内容。
max-heightmax-height