css选择器前5个,5个不常⽤的CSS选择器
如果你是新的CSSer，您使⽤选择器可能仅限于类名(class)，ID和⼀般的元素(tag)。事实上，总共有38 CSS选择器，有些很复杂。
这⾥⽤5个你可能不知道的 CSS选择器，和他们的实⽤案例。
选择器
类型
描述
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;
}
<-underline {
text-decoration: none;
}
这样做意味着带有.no-underline的链接，没有必要地应⽤它们的默认样式。使⽤:not选择器，可以避免这种额外的声明 –
a:not(.no-underline) {
text-decoration: underline;
}
<-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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。