css选择器前5个,5个不常用的CSS选择器

如果你是新的CSSer，您使用选择器可能仅限于类名(class)，ID和一般的元素(tag)。事实上，总共有38 CSS选择器，有些很复杂。

这里用5个你可能不知道的 CSS选择器，和他们的实用案例。

选择器

类型

描述

foo:empty

结构性伪类

一个没有子元素的foo元素

foo::first-letter 和

foo::first-line

伪元素

foo元素的第一个字母和第一行

foo:not(x)

伪类

排除x属性后的所有foo元素

foo:lang(de)

伪类

一个应用德语的foo元素

foo:target

伪类

一个指向URI的目标foo元素

:empty

:empty伪类表示一个元素没有子元素。空格，文本节点，或空的子元素都可以被认为是子元素，但不包括HTML注释。:empty伪类可用于根据元素有无子元素而呈现不同的样式。

一个例子，比如警报消息框。我们只希望他们能够在某些情况下出现，比如，当容器内有文本内容的时候就显示，否则就隐藏，例如 –

::first-letter 和 ::first-line

而::first-letter 和 ::first-line伪元素代表元素中的第一个字母和第一行。特别要注意的是::first-line是响应式的。如你缩小和放大视口，第一行上的文本会相应的增加或者减少，这取决于文本的格式化。

正如你所期望的，他们在格式化文章时特别有用。 例如 –

:not(x)

:not伪类允许您选择排除那些满足一定条件的所有元素。这是非常有用的，因为它可以帮助我们避免编写额外的CSS来覆盖通用样式。

例如，我可能希望我的网站上所有的链接有下划线，但排除我指定的那个样式。通常情况下，我会写 –

a {

text-decoration: underline;

}

a.no-underline {

text-decoration: none;

}

这样做意味着带有.no-underline的链接，没有必要地应用它们的默认样式。使用:not选择器，可以避免这种额外的声明 –

a:not(.no-underline) {

text-decoration: underline;

}

a.no-underline {

text-decoration: none;

}

另外，还有一个常用的案例，比如一个列表中，你希望第一项或最后一项做一些特殊处理，比如：

See the Pen :not伪类 by (@feiwen8772) on CodePen.dark

:lang

:lang伪类是目标元素已被定义为一个特定的语言。选择这些元件，我们可以做很多事情。

1.添加有用的信息和/或样式。我们可以个性化页面中的不同语言的段落，使之更加明确的给用户，以及给这个段落添加有用的信息。

2.使用特殊的引号。不同的语言使用不同的引号，在相关语言能够使用语言原生的引号的时候是很有帮助的。

3.应用特殊字体。如果需要的话，我们也可以将选择该语言更适合的字体或字体样式。例如，在日语中，不适合使用斜体字来强调。相反，我们可以使用点的风格来强调。

See the Pen :lang伪类 by (@feiwen8772) on CodePen.dark

:target

:target伪类这里不再说了，欢迎查看《?:target 伪类使用技巧》https://www.html.cn/archives/6256