理解伪类选择器与伪元素选择器

1. 两个选择器的异同：

伪类选择器是用来向某些选择器来添加效果。不修改DOM内容，通过一些特定的选择器根据特定的状态、特定条件来修改元素的杨氏。比如：悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有 ID 或 class 属性），例如第一个子元素（first-child）或者最后一个子元素（last-child）。

伪元素选择器是一个附加在选择器末尾的关键词，通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。例如通过伪元素您可以设置段落中第一个字母的样式（::first-letter），或者在元素之前（::before）、之后插入一些内容（::after）等等。伪元素可能改变DOM结构，创造了虚拟的DOM。

2. 常见伪元素选择器：

::after::before::first-letter::first-line::selection::placeholder

3. 常见伪类选择器：

（1）结构伪类选择器：

    :first-child:last-child:nth-child(n):nth-last-child(n):first-of-type:last-of-type:nth-of-type(n):nth-last-of-type(n):only-child:only-of-type:root:empty

（2）反选伪类选择器：

    父元素 （空格） :not（标签名）

（3）目标伪类选择器：

    :target

（4）UI元素状态选择器：

    :enabled:disabled:checked

（5）动态伪类选择器：

    :link:visited:hover:active

（6）用户行为伪类选择器

    :focus

理解伪类选择器与伪元素选择器相关推荐

CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
CSS伪类(Pseudo-classes)、伪元素、伪类选择器
CSS伪类(Pseudo-classes)和伪元素(详细) 那什么是伪类? 伪类是添加到选择器上的关键字,指定元素的特殊状态,伪类可以根据内容的状态来应用不同的样式: 伪类选择元素基于的是当前元素处于 ...
HTML相玲选择器,CSS 相邻元素选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器交集选择器由两个选择器直接构成,其中第一个 ...
【结构伪类和否定伪类】
结构伪类总结用题目的形式,来了解常见伪类结构. 结构伪类 1.表示修改前4个元素的样式为字体大小为20px /* 前几个 */div > div:nth-child(-n + 4) {font ...
js后代选择器_后代选择器和子元素选择器的区别
原文简书原文:https://www.jianshu.com/p/4a776598c69c 大纲 1.后代选择器和子元素选择器的相关概念 2.后代选择器和子元素选择器的区别 1.后代选择器和子元素选 ...
html后代选择器和子代选择器,CSS后代选择器与子元素选择器的区别
今天在看css基础的时候,发现了一个很有趣的事情,那就是后代选择器与子元素选择器. 说来也惭愧,我以前一直以为,这俩是同一个东西,只是叫法不同而已,后来才发现,原来这俩是两个不同的东西. 后代选 ...
微信小程序界面设计小程序中的WXSS(css)选择器课程-子元素选择器
小程序中的WXSS(css)选择器课程-子元素选择器微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhu ...
html5子代选择器,伪类、子代、毗邻选择器 — IE6已逝，这些优秀的选择器你怎能不用？...
那些被遗忘的选择器在IE6~8"统治"网络世界的时代,CSS2版本曾经推出过几种选择器,而这几种选择器由于对IE6支持程度较差,使得前端开发工程师不得不将其舍弃.而今,IE6已逝 ...
css3伪类图解,CSS3伪类元素详解/深入浅出
很多朋友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和C ...

理解伪类选择器与伪元素选择器

1. 两个选择器的异同：

2. 常见伪元素选择器：

3. 常见伪类选择器：

理解伪类选择器与伪元素选择器相关推荐

最新文章

热门文章