如果你是新的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