持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第21天,点击查看活动详情
-
伪类
-
概念:伪类和类有一定的相似之处,也存在明显的区别
-
普通的类:必须给标签设置对应的class属性值,才能选中标签,而且类选择器后面添加的属性,会立即加载到浏览器之上
-
伪类:不需要给标签添加任何属性,伪类名都是语法提前规定好的,书写时伪类必须搭配其他选择器使用,伪类选择器后面添加的样式不一定立即加载到浏览器之上,只有用户触发了对应的行为,伪类的样式才会立即加载
-
伪类选择器的权重与普通的类选择器相同
-
伪类选择器写法:前面是普通的选择器,后面紧跟:伪类名
-
-
<a>标签的伪类:<a>标签可以根据用户行为不同,划分为四种状态,通过<a>标签的伪类可以将四种状态选中设置为不同的样式效果,用户触发对应行为,就可以加载对应的样式
-
<a>标签的伪类书写顺序:<a>标签上可能会同时触发2到3个状态,每个状态的属性都会进行加载,相同属性之间会发生层叠;伪类的权重是相同的,只能根据书写顺序,后写的层叠先写的,所以伪类书写顺序非常重要;要想让每个伪类的状态正常加载,书写顺序必须是:访问前link、访问后visited、鼠标移上hover、鼠标点击active;为了方便记忆,利用爱恨准则:love hate -
伪类和伪元素的区别:伪类就如上面所示,而伪元素则是::last-child之类的样式或是::after等等