通用兄弟选择器_掌握通用兄弟选择器：“自定义”选项卡导航

最新推荐文章于 2025-06-02 16:24:34 发布

翻译最新推荐文章于 2025-06-02 16:24:34 发布 · 464 阅读

文章标签：

#css #java #python #html #web

本文介绍如何使用CSS和Sass创建自定义的标签导航组件，包括链接标签、单选标签和箭头标签，涵盖布局、功能、动画及可访问性优化。

通用兄弟选择器

欢迎使用我们的系列教程中的下一部分，在本文中我们将使用通用的同级组合器~为网络创建各种组件。本教程将介绍使用链接和无线电输入的导航元素。

除了CSS选择器， will-change属性和上一教程中的输入状态外，我们还将介绍边框破解，用于循环的Sass， calc()和可访问性！

我们正在努力

这是我们将要构建的演示：

快速免责声明：这些CSS效果可能会在旧版浏览器中起作用，也可能无法起作用–我已经在最新版本的Chrome，Firefox和Safari中对其进行了测试。

我将使用CSS预处理程序Sass来加快编码过程！

我还将使用惊人的AutoPrefixer代替供应商前缀。如果您使用CodePen，请确保进入笔的设置，单击CSS，然后选择AutoPrefixer。

1.链接标签

我们将创建的第一个版本是包含<a>链接的标签栏。这是最简单直接的方法。对于在多个不同的网页上使用常规导航的理想选择。

设置HTML

我们将从具有五个链接和边框的基本<nav>元素开始。您也可以使用其他容器元素，但是我更喜欢导航元素，因为这是此代码段的目的。边框用于显示正在悬停或选中的链接。

<nav class="tab-link">
	<a>home</a>
	<a>shop</a>
	<a>blog</a>
	<a>about</a>
	<a>contact</a>
	<hr/>
</nav>

我也将导航包裹在另一个容器中，但是基本标记不需要它！

样式标签

下一步是为选项卡创建可视基础。容器应相对放置；我们将使用flexbox将链接放置在一行上，但您也可以使用浮动控件。链接应占据相等的空间，以填满容器的整个宽度。

这部分可能很棘手，因此您应该根据用例进行调整。我知道此演示恰好需要五个链接，因此我能够将5用作Sass变量$n来计算确切的宽度calc(100% / 5) 。我这样做是因为我希望能够轻松快捷地更改样式表顶部的链接号，但是如果您不想使用calc() ，也可以使用20%百分比20%如果不使用calc() ，则可以使用固定宽度160px您不知道会有多少个链接。

边框的宽度应与每个链接的宽度相同-我们将使用与链接相同的宽度。最后，我们将其绝对定位在容器的左下角。

增加功能

下一部分使用通用选择器！如果您想在单击链接后使用JavaScript来使边框“粘住”，我们将设置:hover ， :active和:focus以及.active类的.active 。

每次将鼠标悬停在链接上时，边框都需要移动到链接的位置。如果每个链接为160px ，则将鼠标悬停在第二个链接上会导致边框向右移动160px ；否则，边框将向右移动。将320px悬停在第三个链接上会导致边框向右移动320px 。

使用此信息，我们可以构建一个Sass for循环，该循环可以自动计算数字。这是一条指令，它输出一组样式一定次数-在这种情况下，它将输出此转换样式$n次，即5 ，如我们先前指定的那样。

a {
    @for $i from 1 through $n {
		&:nth-child(#{$i}) {
			&.active {
				~ hr {
					transform: translateX(#{($i - 1) * 100%});
				}
			}
			&:hover, &:focus, &:active {
				~ hr, ~ .active ~ hr {
					transform: translateX(#{($i - 1) * 100%});
				}
			}
		}
	}
}

如果要使用固定宽度，我们将替换100% ，这会将边框按其全部宽度移动，以160px或需要链接的宽度来确定。如果最终使用.active ，则需要像上述示例中那样使用指定~.active ~ hr ，因为否则边框将~.active ~ hr在活动位置。

您也可以在没有for循环的情况下执行此操作，但是更新或调整并非那么容易。第二个链接（ a:nth-child(2) ）移动translateX(100%) ，第四个链接移动translateX(300%) ，依此类推。您需要为导航中的每个链接指定一个转换。

如果将鼠标悬停在上面的示例中的Sass代码上，则“ 查看已编译”按钮应显示在右下角，您可以单击该按钮以查看已编译CSS。这对于查看for循环的工作方式以及在没有此Sass指令的情况下如何实现相同功能很有用。

添加动画和转场

最后，我们将添加一些过渡以创建从链接到链接的边界“滑动”运动。当边框返回默认位置时，我们将向边框本身添加一个较慢的过渡，并在悬停时向边框添加一个更快的过渡，以使其捕捉到正确的链接。最后一步是在鼠标悬停和单击时向边框添加一些颜色更改！

2.单选标签

下一个版本的自定义标签导航看起来与第一个版本相同，但是使用无线电输入而不是链接。当浏览同一页面上的内容部分时，此方法效果很好！

设置HTML

HTML中的主要区别在于，我们现在每个选项卡都需要两个元素：一个标签，以可视方式表示该标签，一个单选输入，以添加功能。

<nav class="tab-input">
	<input id="tab-home" name="tab-radio" type="radio"/>
	<input id="tab-shop" name="tab-radio" type="radio"/>
	<input id="tab-blog" name="tab-radio" type="radio"/>
	<input id="tab-about" name="tab-radio" type="radio"/>
	<input id="tab-contact" name="tab-radio" type="radio"/>
	<label for="tab-home">home</label>
	<label for="tab-shop">shop</label>
	<label for="tab-blog">blog</label>
	<label for="tab-about">about</label>
	<label for="tab-contact">contact</label>
	<hr/>
</nav>

每个无线电输入都具有相同的名称，因此选择一个将取消选择其他一个。标签对应于每个输入的ID。您也可以整理您的无线电输入和标签，以使相应的标签和输入彼此相邻（如果更喜欢这种结构的话）！

造型

单选标签导航的样式几乎与链接标签导航的样式完全相同。唯一的区别是，每个无线电输入都必须绝对直接位于其相应标签的顶部。我使用Sass for循环来避免重复，也使用calc()来避免小数百分比，例如16.6667％。

添加功能和动画

对于转换，我们将使用:checked而不是.active类。此状态很有用，因为当您选择一个收音机时，边框将“粘住”！

3.箭头标签

箭头标签与单选标签在功能上相同；它们仅在视觉上有所不同。此版本适用于面包屑样式或分步内容。您也可以根据需要使用链接！

设置HTML和设置标签样式

HTML设置与上面的单选输入选项卡相同。如果要使用链接，它将与链接选项卡相同。

样式上的最大差异来自悬停时移动的边框。边框不是占据底部的细线，而是占据了导航的整个高度。它还位于输入和标签的后面。

为了创建尖端，我们将在hr:before和hr:after上使用边框技巧。每个伪元素的高度和宽度均为0，但边框宽度使其与父容器一样高。这将创建三角形，我们可以单独调整这些三角形以创建尖端。

对于左侧的一组三角形，左侧边框应为白色，而其他边框则为彩色。对于右边的一组三角形，应为左边框着色，而其他为白色。我们还将两个集合的左边界和右边界设置为比顶部和底部更细，以使边缘看起来更短。然后，将每个集合放在hr的左侧和右侧。

添加功能和动画

功能和动画与单选输入或链接（如果您改用链接）完全相同。

ARIA和可访问性

从视觉的角度来看，尽管这些导航元素运行良好，但是使用屏幕阅读器的人或需要其他形式的辅助功能的人可能无法阅读或访问每个选项。

为了解决其中的一些问题，我们可以结合使用角色，标签，隐藏元素和tabindex属性，以便从可访问性的角度正确读取导航。我仍在学习有关辅助功能的很多知识，但是这种组合似乎最适合这种导航方式。

我主要关注隐藏屏幕阅读器不需要的元素，同时标记对导航功能很重要的元素，例如默认情况下像链接一样不包含文本的无线电输入。尝试最适合您的用例的方法！

结论

有数十种不同的方式来利用通用的同级选择器，这些选择器是可视的，功能性的或两者兼而有之。它提供了一种强大的方法来自定义组件，而不必使用CSS和HTML。到目前为止，我们已经介绍了表单和导航元素。在下一个中，我们将学习如何进行自定义下拉菜单。如果您有任何疑问或反馈，请随时在下面发表评论！

翻译自: https://webdesign.tutsplus.com/tutorials/mastering-general-sibling-selectors-custom-tab-navigation--cms-29193

通用兄弟选择器