CSS秘密花园: 相邻元素样式_html/css_WEB-ITnose
《 CSS Secrets 》是 @Lea Verou 最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。
问题
在很多情况下,我们需要给元素的兄弟元素以不同的样式风格呈现。主要的用例是提高用户体验和在大屏幕中不断增加列表荐。下面是一些使用场景:
邮件列表或类似基于文的列表展示。如果我们只有为数不多的列表项,我们可以单独展示。随着列表项的增加,我们可以减少列表的预览项。当列表的高度大于视窗高时,我们可能会选择隐藏一些列表项,或者在尾添加一个查看更多的按钮,让用户在不滚动滚动条也能浏览列表。
App中的待办事项列表(to do list),可以给几个列表项设置大的文本样式,但随着列表项数目增加,列表项目的设置较小的字号。
用来显示颜色的调色板APP。有人可能想随着颜色数量增加,利用好空间让颜色控制面板变得更紧凑些,如下图所示:
随着颜色的数量增加,逐步缩小控制颜色的埠和减少可用空间。注意,在特殊情况之下,当只有一个颜色时,会隐藏删除按钮。
具有多个
然而,针对元素相邻兄弟元素来选择目标元素不是简单的CSS选择器。例如,当列表总数是 4 个时给列表不同样式。我们可以使用 :nth-child(4) 来选择列表的第四个列表项,但这并不是我们所需要的,我们要的是当列表总数为 4 的时候,选择列表的每一个列表项。
有一个想法就是使用通用选择符( ~ )和 :nth-child() 选择器配合使用,例如 li:nth-child(4),li:nth-child(4)~li 。不管列表项总数有多少,只选择了第四个项和其之后的所有列表项,如下图所示:
因为没有“向后选择器”和选择元素之前的兄弟元素的选择器,那么CSS就注定不能选择到需要的目标元素吗?我们不应该失去信心,一切皆有可能。
解决方案
有一个特殊案例就是只有一个单独的列项项目,有一个明显的解决方案: :only-child 选择器,这个选择器就是为这种情况而生的。他是非常有用的,这也是为什么会将其添加到规范中。例如前面提到的颜色调控板APP,当只有一个颜色时,会隐藏删除按钮,那么就可以使用 :only-child 选择器来实现。
li:only-child { /* 当只有一个列表项时的样式 */}
我们在这一节讨论的是 :nth-child() 选择器,但这一切的讨论都同样适用于 :nth-of-type() 选择器。往往这种类型选择器更适用,通常情况之下,容器中会有不同类型的兄弟元素,使用这种类型选择器,我们只要关心一种类型。这里将使用列表元素做为示例讨论,但讨论中的一切都适用于任何类型元素。
然而, :only-child 相当于 :first-child:last-child ,他是第一项也是最后一项,从逻辑上可以得出结论,他就是唯一的项目。其实, :last-child 就是 :nth-last-child(1) 简写。
li:first-child:nth-last-child(1) { /* 和li:only-child等同 */}
当然,现在 1 就是一个参数,我们可以根据自己的喜好调整这个参数。你能猜出 li:first-child:nth-last-child(4) 选到的目标是什么?如果你回答,当列表的总数是四个的时候,选择到 :only-child 的目标元素,你可能太过于乐观了一点。其实事实并不是这样,但是离我们正确的选择目标越来越接近。分别考虑两个选择器: :first-child 和 :nth-last-child(4) 。因此,在相同时间从元素第一个子元素开始计数和倒数第四个子元素计数。那么哪些元素满足这个范围呢?
正确答案是,只个四个元素的列表的第一个元素被选中,如下图所示:
这并不是我们想要的结果,但已非常接近我们需要的效果。因为我们在一个列表中选择到了第一个子元素,我们可以使用通用选择符( ~ )来选择第一个子元素后的相邻兄弟元素。这样一来,如果列表只有四个列表项时,所有列表项都将被选中。这正是我们试图要实现的效果:
li:first-child:nth-last-child(4),li:first-child:nth-last-child(4) ~ li { /* 目标选择了仅有四个列表项的列表所有列表项 */}
为了避免代码的冗长和重复的解决方案,可以使用预处理器,例如SCSS。尽管现有的预处理器语法比图笨拙:
/* 定义mixin */@mixin n-items($n) { &:first-child:nth-last-child(#{$n}), &:first-child:nth-last-child(#{$n}) ~ & {@content; }}/* 像这样使用 */li { @include n-items(4) { /* 这里写样式 */ }}
选择兄弟元素范围
在大多数实际运用中,我们并不希望瞄准特定数量的列表,而是希望在一个范围内。有一个小技巧,我们可以使用 :nth-child() 选择器来指定一个选择范围。例如选择第四个之后的列表项。除了使用简单的数字作为参数之外,还可以使用 an+b 表达式作为参数(例如: :nth-child(2n+1) ),其中 n 是一个变量,范围是从 0 到 +∞ (实际上,值在某点不会选择任何东西,因为我们元素的数量是有限的)。如果我们使用一个表达式 n+b ( a 默认下是 1 ),那么,如果 n 不是一个正整数时可以给我们一个小于 b 值的范围。因此,表达式 n+b 可以用来第 b 个值为第一个子元素所有子元素。例如: :nth-child(n+4) 选择除了第一、第二、第三的所有子元素。如下图所示:
如果你不想为 :nth-* 选择器做过多的思考,你可以使用一个测试工具,我写了一个 在线的工具 ,足够你做测试。
我们可以利用这个功能来选择列表项是四个或更多的列表子元素,如下图所示:
在这种情况下,我们可以在 :nth-last-child() 使用 n+4 这个表达式:
li:first-child:nth-last-child(n+4),li:first-child:nth-last-child(n+4) ~ li { /* 目标列表选择最少包含四个列表项 */}
同样,表达式 -n+b 可以用来选择第 b 个元素。因此,选择仅有四个或更少的列表项的列表的所有子元素时,就可以使用这种表达式。
如上图所示,我们代码可以这样写:
li:first-child:nth-last-child(-n+4),li:first-child:nth-last-child(-n+4) ~ li { /* 选择列表项最多只有四个的列表所有子元素 */}
当然,我们可以结合这两个,但现在的代码变得更加笨拙。假设我们列表包含 2~6 项的列表所有子元素:
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个列表项的列表所有子元素*/}

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.
