목차
问题
解决方案
选择兄弟元素范围
웹 프론트엔드 HTML 튜토리얼 CSS秘密花园: 相邻元素样式_html/css_WEB-ITnose

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

Jun 21, 2016 am 08:51 AM

《 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个列表项的列表所有子元素*/}
로그인 후 복사
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

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

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

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

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

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

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

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

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

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

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

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

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

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

뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? 뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? Mar 20, 2025 pm 05:56 PM

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

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

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

See all articles