CSS秘密花园：相邻元素样式_html/css_WEB-ITnose

《 CSS Secrets 》是 @Lea Verou 最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。

问题

在很多情况下，我们需要给元素的兄弟元素以不同的样式风格呈现。主要的用例是提高用户体验和在大屏幕中不断增加列表荐。下面是一些使用场景：

邮件列表或类似基于文的列表展示。如果我们只有为数不多的列表项，我们可以单独展示。随着列表项的增加，我们可以减少列表的预览项。当列表的高度大于视窗高时，我们可能会选择隐藏一些列表项，或者在尾添加一个查看更多的按钮，让用户在不滚动滚动条也能浏览列表。

App中的待办事项列表(to do list),可以给几个列表项设置大的文本样式，但随着列表项数目增加，列表项目的设置较小的字号。

用来显示颜色的调色板APP。有人可能想随着颜色数量增加，利用好空间让颜色控制面板变得更紧凑些，如下图所示：

随着颜色的数量增加，逐步缩小控制颜色的埠和减少可用空间。注意，在特殊情况之下，当只有一个颜色时，会隐藏删除按钮。

具有多个 的APP，我们每次新增加一个文本域，他就比前一个更小一些（例如 bytesizematters.com ）。 </p> <p> 然而，针对元素相邻兄弟元素来选择目标元素不是简单的CSS选择器。例如，当列表总数是 4 个时给列表不同样式。我们可以使用 :nth-child(4) 来选择列表的第四个列表项，但这并不是我们所需要的，我们要的是当列表总数为 4 的时候，选择列表的每一个列表项。 </p> <p> 有一个想法就是使用通用选择符( ~ )和 :nth-child() 选择器配合使用，例如 li:nth-child(4),li:nth-child(4)~li 。不管列表项总数有多少，只选择了第四个项和其之后的所有列表项，如下图所示： </p> <p> </p> <p>因为没有“向后选择器”和选择元素之前的兄弟元素的选择器，那么CSS就注定不能选择到需要的目标元素吗？我们不应该失去信心，一切皆有可能。</p> <h3>解决方案</h3> <p> 有一个特殊案例就是只有一个单独的列项项目，有一个明显的解决方案： :only-child 选择器，这个选择器就是为这种情况而生的。他是非常有用的，这也是为什么会将其添加到规范中。例如前面提到的颜色调控板APP，当只有一个颜色时，会隐藏删除按钮，那么就可以使用 :only-child 选择器来实现。 </p> <pre class="sycode" name="code">li:only-child { /* 当只有一个列表项时的样式 */}</script></pre> <p> <p> 我们在这一节讨论的是 :nth-child() 选择器，但这一切的讨论都同样适用于 :nth-of-type() 选择器。往往这种类型选择器更适用，通常情况之下，容器中会有不同类型的兄弟元素，使用这种类型选择器，我们只要关心一种类型。这里将使用列表元素做为示例讨论，但讨论中的一切都适用于任何类型元素。 </p> </p> <p> 然而， :only-child 相当于 :first-child:last-child ，他是第一项也是最后一项，从逻辑上可以得出结论，他就是唯一的项目。其实， :last-child 就是 :nth-last-child(1) 简写。 </p> <pre class="sycode" name="code">li:first-child:nth-last-child(1) { /* 和li:only-child等同 */}</script></pre> <p> 当然，现在 1 就是一个参数，我们可以根据自己的喜好调整这个参数。你能猜出 li:first-child:nth-last-child(4) 选到的目标是什么？如果你回答，当列表的总数是四个的时候，选择到 :only-child 的目标元素，你可能太过于乐观了一点。其实事实并不是这样，但是离我们正确的选择目标越来越接近。分别考虑两个选择器： :first-child 和 :nth-last-child(4) 。因此，在相同时间从元素第一个子元素开始计数和倒数第四个子元素计数。那么哪些元素满足这个范围呢？ </p> <p>正确答案是，只个四个元素的列表的第一个元素被选中，如下图所示：</p> <p> </p> <p> 这并不是我们想要的结果，但已非常接近我们需要的效果。因为我们在一个列表中选择到了第一个子元素，我们可以使用通用选择符( ~ )来选择第一个子元素后的相邻兄弟元素。这样一来，如果列表只有四个列表项时，所有列表项都将被选中。这正是我们试图要实现的效果： </p> <pre class="sycode" name="code">li:first-child:nth-last-child(4),li:first-child:nth-last-child(4) ~ li { /* 目标选择了仅有四个列表项的列表所有列表项 */}</script></pre> <p>为了避免代码的冗长和重复的解决方案，可以使用预处理器，例如SCSS。尽管现有的预处理器语法比图笨拙：</p> <pre class="sycode" name="code">/* 定义mixin */@mixin n-items($n) { &:first-child:nth-last-child(#{$n}), &:first-child:nth-last-child(#{$n}) ~ & {@content; }}/* 像这样使用 */li { @include n-items(4) { /* 这里写样式 */ }}</script></pre> <h3>选择兄弟元素范围</h3> <p> 在大多数实际运用中，我们并不希望瞄准特定数量的列表，而是希望在一个范围内。有一个小技巧，我们可以使用 :nth-child() 选择器来指定一个选择范围。例如选择第四个之后的列表项。除了使用简单的数字作为参数之外，还可以使用 an+b 表达式作为参数（例如： :nth-child(2n+1) ）,其中 n 是一个变量，范围是从 0 到 +∞ (实际上，值在某点不会选择任何东西，因为我们元素的数量是有限的)。如果我们使用一个表达式 n+b ( a 默认下是 1 )，那么，如果 n 不是一个正整数时可以给我们一个小于 b 值的范围。因此，表达式 n+b 可以用来第 b 个值为第一个子元素所有子元素。例如： :nth-child(n+4) 选择除了第一、第二、第三的所有子元素。如下图所示： </p> <p> </p> <p> <p> 如果你不想为 :nth-* 选择器做过多的思考，你可以使用一个测试工具，我写了一个 在线的工具 ，足够你做测试。 </p> </p> <p>我们可以利用这个功能来选择列表项是四个或更多的列表子元素，如下图所示：</p> <p> </p> <p> 在这种情况下，我们可以在 :nth-last-child() 使用 n+4 这个表达式： </p> <pre class="sycode" name="code">li:first-child:nth-last-child(n+4),li:first-child:nth-last-child(n+4) ~ li { /* 目标列表选择最少包含四个列表项 */}</script></pre> <p> 同样，表达式 -n+b 可以用来选择第 b 个元素。因此，选择仅有四个或更少的列表项的列表的所有子元素时，就可以使用这种表达式。 </p> <p> </p> <p>如上图所示，我们代码可以这样写：</p> <pre class="sycode" name="code">li:first-child:nth-last-child(-n+4),li:first-child:nth-last-child(-n+4) ~ li { /* 选择列表项最多只有四个的列表所有子元素 */}</script></pre> <p> 当然，我们可以结合这两个，但现在的代码变得更加笨拙。假设我们列表包含 2~6 项的列表所有子元素： </p> <pre class="sycode" name="code">li:first-child:nth-last-child(n+2):nth-last-child(-n+6),li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li{ /*选择包含2-6个列表项的列表所有子元素*/}</script></pre> </div> <div class=""> <ul class="m-news-opt fix"> <li class="opt-item"> <a href='/htmldaima-264059.html' target='_blank'><p>< 上一篇</p><p class="ellipsis">一周阅读推荐#3_html/css_WEB-ITnose</p></a> </li> <li class="opt-item ta-r"> <a href='/htmldaima-264061.html' target='_blank'><p>下一篇 ></p><p class="ellipsis">关于页面刷新问题_html/css_WEB-ITnose</p></a> </li> </ul> </div> </div> </div> <div class="g-title fix"> <h2 class="title-txt">人气教程排行</h2> </div> <div class="m-rank u-dashed mb40"> <ul> <li class="rank-item"> <a href="/htmldaima-274978.html" title='如何生成一个调查问卷_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">230次</span> <span class="g-sort-num top">1</span> 如何生成一个调查问卷_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-274080.html" title='在页面直接显示日历_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">230次</span> <span class="g-sort-num second">2</span> 在页面直接显示日历_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-262106.html" title='如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">230次</span> <span class="g-sort-num third">3</span> 如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作 </a> </li> <li class="rank-item"> <a href="/htmldaima-278863.html" title='关于列表标记的详细介绍' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">229次</span> <span class="g-sort-num ">4</span> 关于列表标记的详细介绍 </a> </li> <li class="rank-item"> <a href="/htmldaima-277331.html" title='cssborder-bottom（指定下边线的样式、宽度及颜色）' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">229次</span> <span class="g-sort-num ">5</span> cssborder-bottom（指定下边线的样式、宽度及颜色） </a> </li> <li class="rank-item"> <a href="/htmldaima-270548.html" title='html新闻详情页_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">229次</span> <span class="g-sort-num ">6</span> html新闻详情页_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-268070.html" title='为何页面内容和网页边缘有空隙_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">229次</span> <span class="g-sort-num ">7</span> 为何页面内容和网页边缘有空隙_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-269054.html" title='position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">228次</span> <span class="g-sort-num ">8</span> position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-280863.html" title='htmlp标签怎么换行？htmlp标签添加br换行标签的应用' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">227次</span> <span class="g-sort-num ">9</span> htmlp标签怎么换行？htmlp标签添加br换行标签的应用 </a> </li> <li class="rank-item"> <a href="/htmldaima-281519.html" title='HTML的<!DOCTYPE>标签' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">10</span> HTML的<!DOCTYPE>标签 </a> </li> <li class="rank-item"> <a href="/htmldaima-280725.html" title='html页面中友情链接怎么进行添加设置？（代码示例）' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">11</span> html页面中友情链接怎么进行添加设置？（代码示例） </a> </li> <li class="rank-item"> <a href="/htmldaima-278651.html" title='form表单中属性及功能应用介绍汇总' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">12</span> form表单中属性及功能应用介绍汇总 </a> </li> <li class="rank-item"> <a href="/htmldaima-278586.html" title='详解form标签中的method属性' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">13</span> 详解form标签中的method属性 </a> </li> <li class="rank-item"> <a href="/htmldaima-277758.html" title='HTML5Canvas逼真烟雾效果js插件' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">14</span> HTML5Canvas逼真烟雾效果js插件 </a> </li> <li class="rank-item"> <a href="/htmldaima-275669.html" title='页面跳转特效_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">15</span> 页面跳转特效_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-271209.html" title='改变鼠标选中区域的样式。_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">16</span> 改变鼠标选中区域的样式。_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-273428.html" title='关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">225次</span> <span class="g-sort-num ">17</span> 关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-271182.html" title='CSS3悬浮动画效果_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">225次</span> <span class="g-sort-num ">18</span> CSS3悬浮动画效果_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-271093.html" title='纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">225次</span> <span class="g-sort-num ">19</span> 纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-267953.html" title='body在默认情况下是具有margin外边距的_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">225次</span> <span class="g-sort-num ">20</span> body在默认情况下是具有margin外边距的_html/css_WEB-ITnose </a> </li> </ul> </div> </div> </div> <!-- / 教程内容页 --> </div> </div> <!-- 页尾 --> <div class="footer"> 本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！</div> <!-- / 页尾 --> <script type="text/javascript" src="/kan/js/read.js"></script> <div style="display:none"> <div class="login-box" id="login-dialog"> <div class="login-top"><a class="current" rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div> <div class="login-form" id="nav-signin"> <!-- <div class="login-ico"><a rel="nofollow" class="qq" id="qqlogin" target="_blank" href="/user-center-qqlogin.html"> QQ </a></div> --> <div class="login-box-form" id="con_login_1"> <form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;"> <p class="int-text"> <input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p> <p class="int-text"> <input class="password1" type="password" id="password" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" > </p> <p class="int-info"> <label class="ui-label"> </label> <label for="agreement" class="ui-label-checkbox"> <input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000"> <input type="hidden" name="notforward" id="notforward" value="1"> <input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label> <a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p> <p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p> </form> </div> <form id="regform" action="/user-center-reg.html" method="post"> <div class="login-reg" style="display: none;" id="con_login_2"> <input type="hidden" name="t" id="t"/> <p class="int-text"> <input id="email" name="email" type="text" value="Email" onfocus="if(this.value=='Email'){this.value='';}" onblur="if(this.value==''){this.value='Email';};"></p> <p class="int-text"> <input id="uname" name="username" type="text" value="用户名或昵称" onfocus="if(this.value=='用户名或昵称'){this.value='';}" onblur="if(this.value==''){this.value='用户名或昵称';};"></p> <p class="int-text"> <input type="password" id="pwd" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';"> </p> <p class="int-text1"><span class="inputbox"> <input id="validate" name="validate" type="text" value="验证码" onfocus="if(this.value=='验证码'){this.value='';}" onblur="if(this.value==''){this.value='验证码';};"> </span><span class="yzm-img"><img src="/user-checkcode-index" alt="看不清楚换一张" id="indexlogin"></p> <p class="int-info"> <label> <input value="" name="agreement" id="agreement" CHECKED="checked" type="checkbox"> 我已阅读<a rel="nofollow" href="/user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/user-center-agreement.html">版权声明</a></label> </p> <p class="int-btn"><input type="hidden" name="dosubmit"/> <a rel="nofollow" class="loginbtn" id="register"><span>注册</span></a></p> </div> </form> </div> </div> </div> </div> <script type="text/javascript" src="/kan/js/foot_js.js"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6dc1c3c5281cf70f49bc0bc860ec24f2"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript" src="/layui/layui.js"></script> <script> layui.use('code', function() { layui.code({ elem: 'pre', //默认值为.layui-code about: false, skin: 'notepad', title: 'php怎么实现数据库验证跳转代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> </body> </html>