在此记录一些常用的 pseudo class & pseudo elements. 要查看更多的,MDN 是个好去处,还有对于的浏览器兼容性说明。 :focus pseudo class. 例如,点击了一个输入框,将焦点至于其中,或者 TAB 到了该元素上。 :before & :after pseudo element. 就是在某个元素前/后加入指定内容,当然我并不觉得这个功能很实用,因...
伪类(Pseudo-class)和伪元素(Pseudo-element) Pseudo-class 一个CSS 伪类(pseudo-class)是一个以冒号作为前缀的关键字,当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类(pseudo-class)。 :root 匹配文档树的根元素, 它比html选择器的优先度更高 :not(X) 匹配不符合参...
给input元素添加一个:focus伪类,当input元素获得焦点时改变其边框颜色,常用于表单输入的美化。 常见的伪类有:active, :hover, :focus, :first-child, :disabled, :visited, :last-child, :nth-child()等。 :active 伪类用于匹配被激活的元素,比如点击一个链接时,鼠标按下到松开之间的时间这个链接时激活的。 :...
相同点: Pseudo-class和pseudo-element的语法都是以selector或者selector.class开始的。 不同点: Pseudo-class的操作对象是文档树中已有的元素,而pseudo-element则创建了一个文档数外的元素。因此,Pseudo-class和pseudo-element的区别在于:有没有创建一个文档树之外的元素。Pseudo-class只有一个冒号,pseudo-element有两...
::backdrop It applies styles to a background behind a specific element to give it more importance or emphasis. I'm an open dialog window Check out my backdrop :) Close dialog::backdrop { background-color: rgba(106, 130, 251, 0.4); } ::first-letter It applies styles to the ...
s technical definition, a pseudo-class is basically a phantom state or specific characteristic of an element that can be targeted with CSS. A few common pseudo-classes are:link,:visited,:hover,:active,:first-childand:nth-child. There are more, and we’re going to see them all in a ...
This allows you to make changes should certain classes be added to the custom element. You can also pass pseudo-classes in there, like:host(:last-child)and:host(:hover). CodePen Embed Fallback The:host-contextpseudo-class Now let’s talk about:host-context. It’s like our friend:host(...
what can a pseudo-class/pseudo-element do? 伪类(pseudo-class)& 伪元素(pseudo-element) 伪类和伪元素在web开发中用的好的话,可以说犹如神助。 但一定要分清楚,什么是伪类,什么是伪元素。 如何区分伪元素与伪类? 答:伪元素在html文档渲染后,页面中有相应的内容显示,同时能够设置它的样式,而伪类只能设置样...
Error:CSS minification error:Expected a pseudo-classorpseudo-element..File:static/css/chunk-54dad19c.4031b68b.css at D:\work\nia-nation\nia-front\node_modules\@intervolga\optimize-cssnano-plugin\index.js:106:21at async Promise.all(index22)npm ERR!code ELIFECYCLE ...
About element positioning Length units reference Understanding selectors Selectors and combinators Pseudo-classes Pseudo-classes :active :checked :disabled :empty :enabled :first-child :first-of-type :focus :hover :indeterminate :lang :last-child ...