CSS学习-彻底搞懂伪类和伪元素

CSS学习-彻底搞懂伪类和伪元素

在特定场景下改变页面元素样式时，习惯使用js来解决。比如下图，文本域获取焦点变长的样式；


其实CSS伪类就可以完成。
回顾一下CSS知识：CSS通过选择器和样式规则，控制网页元素样式；其中选择器负责筛选并找到符合要求的页面元素。常见的选择器包括id选择器、类选择器、标签名选择器、后代选择器、属性选择器等；通过属性值或层级关系来筛选元素；而伪类可以理解为筛选满足某某条件的某某元素。比如：

div:hover··················代表满足鼠标悬停在div元素上的div元素;

input:in-range············代表满足元素值在范围内的input元素;

div > p:last-of-type······代表div元素下子元素中最后一个p元素；

div > p:last-child········代表满足div元素下子元素最后一个元素是p元素的p元素;

按照这种翻译是不是感觉一下子就明白什么是伪类啦！
当然我们也可以把伪类放在层级选择器的前面：

li:hover > a··········代表满足鼠标悬停在li元素上的li元素的子元素a

接下来什么是伪元素？
网页展示的内容（文字、图片等资源）都是放在html里的；像负责逻辑的js也只能通过DOM来改变网页元素添加内容；而负责样式的CSS更不会越界去添加HTML内容，但为了显示一些特殊样式，需要通过伪元素::before、::after等来实现，特别提醒：伪元素不是网页元素，它只是为了样式而在页面渲染时产生的（不在渲染树里面），更不可能通过DOM来操作。