css伪类选择器 where（css伪类选择器怎么用）



在编写 CSS 时，有时您可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如，如果您想对​​标题元素中找到的任何标签进行颜色调整，您可以编写：

相反，您可以使用​​并提高易读性，同时避免使用长选择器：

易读性和更短的选择便利是只有一块的价值​​​，并​​带来CSS。在这篇文章中，您将发现这两个函数式伪选择器的语法和值。

使用前后的无限视觉 ​​

的​​​和​​​伪类在铬（> = 88），火狐（> = 78）和Safari（> = 14）的支持。有关更多信息，请参阅 MDN 的浏览器兼容性​表。一些较旧的浏览器版本支持​​​选择器为​​​或​​​。有关更多信息，请参阅:is()MDN 上的页面。

这些是功能性伪类选择器，请注意​​​末尾的 和它们以 开头的方式​​。将这些视为匹配元素的运行时动态函数调用。在编写 CSS 时，它们为您提供了一种在选择器的中间、开头或结尾将元素组合在一起的方法。它们还可以改变特异性，使您能够取消或增加特异性。

​​​关于分组可以做的任何事情，也可以​​。这包括在选择器中的任何地方使用、嵌套和堆叠它们。您了解和喜爱的完整 CSS 灵活性。下面是几个例子：

上述每个选择器示例都展示了这两个函数伪类的灵活性。要查找可以从​​​或 中受益的代码区域，请​​查找带有多个逗号和选择器重复的选择器。

要复习选择器，请查看Learn CSS 上​的选择器模块。以下是一些简单和复杂选择器的示例，以帮助说明该功能：

陷阱！

通常，在使用 a​​​创建选择器列表时，如果其中任何一个选择器无效，则所有选择器都将失效，并且列表将无法匹配元素。也就是说，他们不原谅错误。​​​并且​​​虽然被原谅​，并且可以让你摆脱困境的！

到目前为止，​​​和​​在语法上是可以互换的。是时候看看它们有何不同了。

说到特异性，​​​又​​​强烈发散。要重新了解特殊性，请参阅Learn CSS 上​的特殊性模块。

简而言之

• • 
    
• ​​没有特异性。
  ​​压缩作为功能参数传递的选择器列表中的所有特殊性。这是同类选择器功能中的首创。
  
• ​​采用其最具体的选择器的特异性。
  ​​有一个 ID 的特异性得分，100 分。
  • 
    
  
  

当我对分组过于兴奋时，从列表中选择最高特异性的选择器对我来说只是一个问题。我总是能够通过将高特异性选择器移动到它自己的选择器来提高易读性，因为它不会产生太大影响。这是我的意思的一个例子：

使用​​，我正在等待看到库提供没有特定性的版本。作者风格和图书馆风格之间的特殊性竞争可能会结束。编写 CSS 时不会有任何特殊性可以与之竞争。CSS 已经在很长一段时间内致力于这样的分组功能，它就在这里，但它仍然在很大程度上是未开发的领域。制作更小的样式表并删除逗号，玩得开心。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/32301.html