跳到主要内容位置

CSS 标签选择器

要想对 HTML 文档的元素,使用 CSS 美化样式,那么需要选择对应的 HTML 元素,才能针对它们编写 CSS 属性。CSS 选择器有标签选择器、Class 选择器、ID 选择器、伪类选择器、伪类选择器,和组合选择器等,这一小节我们先看一下最简单的标签选择器。

CSS 标签选择器的使用方法

CSS 标签选择器用于选择个特定的 HTML 元素标签,例如 divpa 等,选择之后,会对所有符合条件的 HTML 元素应用样式。假设我们有这样的 HTML 结构:

<nav>
<a href="#">导航链接1</a>
<a href="#">导航链接2</a>
<a href="#">导航链接3</a>
<a href="#">导航链接4</a>
</nav>

预览:

如果我们要想把 <a/> 标签的文字大小设置为 18px,并修改一下颜色,可以使用下面的 CSS 代码:

  a { 
font-size: 18px;
color: hsl(214deg, 50%, 60%);
}

预览:

可以看到 <nav> 标签下的 <a /> 标签全部都选中了,并且也应用了对应的样式,这个就是标签选择器的特点,在这个示例中,它会选择 HTML 页面中所有的 <a>

小结

这个就是 CSS 标签选择器的作用和使用方法,它能够选择 HTML 页面中,所有指定的元素,然后对它们应用样式,一般适合编写一些通用的样式,或者默认的样式,在它基础上,再使用其它的选择器设置更特殊的样式。