CSS :is() 伪类选择器使用指南
在使用 CSS 编写页面样式的时候,你是不是写过类似的代码:
li a,artcile a,section a { color: #000000;}h1 a,h2 a,h3 a { color: blue;}
为了给一篇文章中,不同位置的超链接设置不同的颜色,需要在多个选择器中,重复的选择 a
元素,如果是其它名字比较长的元素或者 class,那么写起来会特别麻烦,稍加不注意就会写错。
在使用 CSS 编写页面样式的时候,你是不是写过类似的代码:
li a,artcile a,section a { color: #000000;}h1 a,h2 a,h3 a { color: blue;}
为了给一篇文章中,不同位置的超链接设置不同的颜色,需要在多个选择器中,重复的选择 a
元素,如果是其它名字比较长的元素或者 class,那么写起来会特别麻烦,稍加不注意就会写错。
在编写网站的时候,或多或少都会用到一些网络上的字体,CSS 3 中虽然加入了对 Web Fonts(网络字体)的支持,但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下,在 Web Fonts 加载时,使用该字体的地方会显示空白,直到字体下载完成之后才会显示,这时通过改变 CSS 中的 font-display
属性,就可以避免这个问题。
作为一名前端工程师,经常在写完 HTML 以后,才觉得真正的噩梦要开始了,啊,写 CSS 的时候,面对满屏乱飞的组件,真想手动给他们挪到该在位置上…… 都说 CSS 很难掌握,最愁给页面编写样式,其实都是因为还没有形成一个对 CSS 宏观的了解,只要有了正确的学习方法、设计思维,再通过不断的积累,就能轻松的掌握它。接下来我会把掌握 CSS 的 5 个技巧整理一下,让你在以后编写 CSS 的时候不再发愁。
在写 CSS 的时候你一定遇到过有些样式明明写对了,也选择了正确的 html 元素去应用这些样式,可是就是不生效,这是为什么呢?因为在选择同一个 HTML 元素的时候,不同的选择器有不同的优先级,优先级低的选择器的样式会被优先级高的覆盖。