我正在处理容器对象的CSS。我有它主要工作。具体来说,我正在查看测试用例11和12.我想在处理:first-child
和:last-child
时忽略隐形儿童。
使用:visible:first-child
似乎并没有像我预期的那样发挥作用。谷歌让我失望......:可见根本不是一个选择器,它是一个jQuery的东西。
无论如何使用CSS来选择第一个/最后一个可见的孩子吗?
这也是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>
&#13;
答案 0 :(得分:0)
没有:可见的选择器,但你可以使用一些类来选择隐藏的元素(就像你已经做的那样),所以这应该是这样的:
.hidden + :not(.hidden) {
//code you want to set to first visible child goes here
}
.hidden + :not(.hidden) ~ :not(.hidden) {
//code to reset stuff what you've set before
}