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伪类可用于根据元素有无子元素而呈现不同的样式。

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

See the Pen :empty选择器案例 by (@feiwen8772) on CodePen.dark

::first-letter 和 ::first-line

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

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

See the Pen ::first-letter 和 ::first-line伪类 by (@feiwen8772) on CodePen.dark

: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

主要内容翻译自:https://bitsofco.de/5-lesser-used-css-selectors/

 

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 5个不常用的CSS选择器

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏