CSS伪类与伪元素 每日更新前端基础,如果觉得不错,点个star吧 ?...也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。...伪类 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。...虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。 状态性伪类 是基于元素当前状态进行选择的。...比如说,我们可以通过::before来在一个元素前增加一些文本,并为这些文本添加样式。 CSS3规范中要求使用单冒号:用于CSS3伪类,双冒号::用于 CSS3伪元素,目的是区分伪类和伪元素。
1.伪类与伪元素 先说一说为什么css要引入伪元素和伪类,以下是css2.1 Selectors章节中对伪类与伪元素的描述: CSS introduces the concepts of pseudo-elements...直译过来就是:css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。...下面分别对伪类和伪元素进行解释: 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。...处于试验阶段的伪类或伪元素会在标题中标注。 伪类 状态 由于状态伪类的用法大家都十分熟悉,这里就不用例子说明了。...1 :link 选择未访问的链接 2 :visited 选择已访问的链接 3 :hover 选择鼠标指针浮动在其上的元素 4 :active 选择活动的链接 5 :focus 选择获取焦点的输入字段 结构化
背景 写了这么多年代码,对CSS中的伪类和伪元素竟然没有细致的进行过学习总结,由此可见在实际代码开发中,用的也确实不多,也就用过一些:first-child,:hover之类的吧,其它的连before...什么的都没用过,于是迫切需要大于伪元素与伪类进行一个系统整体的学习。...伪类和伪元素 伪类:是以一个冒号作为前缀,被添加到选择器的末尾,当你希望在特定状态下(:hover)才被呈现到指定元素时,可以往元素的选择器后面加上伪类。...常用的伪类和伪元素 伪类可以从状态类伪类、结构类伪类、其它伪类和表单相关伪类进行分类。...: :fullscreen全屏显示、:lang()匹配指定语言 表单相关伪类: :checked选中、:disabled禁用、:required必填、:read-only只读 伪元素:::before
伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。...伪类的种类 伪元素的种类 区别 这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。....first-child {color: red} first second 即我们给第一个子元素添加一个类...,然后定义这个类的样式。... 总结 伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。
CSS 引入伪类和伪元素的概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。...2.伪类和伪元素的概念 2.1 伪类: 伪类用于当已有元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。...虽然它和普通的 CSS 类相似,可以为已有的元素添加样式,但是它只有处于 DOM 树无法描述的状态下才能为元素添加样式,所以将其称为伪类。...3.伪类列举 伪类和伪元素-1.png 3.1 状态伪类 状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的,因此该元素会根据其状态呈现不同的样式。...选择处于编辑状态的元素;input,textarea 和设置 contenteditable 的 HTML 元素获取焦点时即处于编辑状态 :checked input:checked 匹配勾选的input
定义 伪类 CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。 例如,:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。.../* 所有用户指针悬停的按钮 */ button:hover { color: blue; } 伪类存在的意义是为了通过选择器,格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。...分类 伪类 ? 伪元素 ?...因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素。...总结 1.伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息; 2.伪元素本质上是创建了一个有内容的虚拟容器; 3.CSS3中伪类和伪元素的语法不同; 4.可以同时使用多个伪类,而只能同时使用一个伪元素
熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆(包括我)。那今天就让我们来看看伪类和伪元素的区别吧!...伪类与伪元素 先说一说为什么css要引入伪元素和伪类,以下是css2.1 Selectors章节中对伪类与伪元素的描述: CSS introduces the concepts of pseudo-elements...直译过来就是:css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。...下面分别对伪类和伪元素进行解释: 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。...伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。
为什么要引入伪类与伪元素? css引入伪类和伪元素概念是为了格式化文档树以外的信息。...也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或是列表中的第一个元素,又或者是鼠标悬停在某个超链接上时要设置的样式。 什么是伪类,伪元素?...虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。 伪元素:用于创建一些不在文档树中的元素,并为其添加样式。...比如说,我们可以通过:before来在一个元素前增加一些文本,并为这些文本添加样式。 伪类的分类:状态伪类和结构性伪类 状态伪类:是基于元素当前状态进行选择的。...伪元素的应用: 清除浮动:如果父元素的所有子元素都是浮动的,父元素的高度则无法撑开。可以通过对父元素添加after伪类撑开父元素高度,因为after就是其最后一个子元素。
目标网站红薯中文网 获取网页源代码也获取不了这些动态渲染的数据 所以用简单的,但是有点麻烦的方法 使用selenium执行js,或者直接在浏览器里面执行js function kkk(){...fWn8lSsFsaF/9s+k9EL38YQKC8ABGoSedLdjZXb4HLx8aMfTaPt6qbOX1d10WSD8LIl5YkNVPyqaZQMKfWrsYniA8O6JPtEJjwVTII6arY9jS3mAd9WcwcL2rTz5.../0iEUOnIdebjTVTqHj5Ttco0wJ5q5Aa5s9pR3VmupI7KgGZwBg05dVirmTZ0Ym2QSAA2kVwY3BTAEAZpTNWzmF7KLwD3mk63yf/4Js5SVS8mfwxoFgTOhPxlsc6WrtJN9tJU7BUe6yKye9...hs_decrypt(base64decode(connt_data), "76980100")) 这里代码还没封装,但是解密够了,connt_data就是需要解密的参数 76980100是上一个请求获取的解密密钥...套用即可 解密之后,里面的参数是对应的 context_kw11 这个就是对应的伪元素的class,将这个都拿去用selenium执行js的方法获取到结果,保存为字典,最后在用re正则,将所有数据都正则出来
伪类和伪元素用于css选择器,利用他们使css更灵活。...常见的伪类 伪元素与伪类的区别 伪元素将元素的某些部分作为元素选中(但不选中真正的元素),而伪类对应选择的元素的特殊状态(选择真正的元素)。...w3c的定义是,伪类用于向某些选择器添加特殊的效果(选择器已选中元素),伪元素用于将特殊效果添加到选择器(通过伪元素才能确定选中元素)。...更直观的理解是,伪元素达到的效果必须通过添加真实的元素替代,而伪类达到的效果必须通过添加真实的类替代。 :hover 鼠标悬停于某一元素时生效。...:root 匹配文档树的根元素,在HTML文档中匹配html元素 更多伪类 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
1.伪类选择器和伪元素选择器 伪类选择器是用来向某些选择器来添加效果。...(空格) :not(标签名) (3)目标伪类选择器: :target (4)UI元素状态选择器: :enabled :disabled :checked (5)动态伪类选择器: :link...:visited :hover :active (6)用户行为伪类选择器 :focus 伪元素选择器则是用来将特殊的效果添加在选择器上。...:伪类不修改DOM容,通过一些特定的选择器根据特定的状态,特定条件来修改元素的样;而伪元素可能改变DOM结构,创造了虚拟的DOM 伪类选择器只是相当于给标签加上了个名字,让我们能够找到精准的位置,而伪元素选择器修改了他原本的结构...2.注意 可通过使用css伪类实现点击元素变色的效果,两个伪类是:active, :focus :active :active选择器用于选择活动链接。
'#',以及在内容之后添加一个'$',插入的行内元素是作为#example的子元素,效果如下: #Here is the example content$ 需要注意的是如果没有content属性,伪类元素将没有任何作用...但是可以指定content为空,同时正如前面所说,插入的内容默认是一个行内元素,并且在HTML源代码中无法看到,这就是为什么称之为伪类元素的理由,所以也就无法通过DOM对其进行操作。...需要注意的是如果没有content属性,伪类元素将没有任何作用。...但是可以指定content为空,同时正如前面所说,插入的内容默认是一个行内元素,并且在HTML源代码中无法看到,这就是为什么称之为伪类元素的理由,所以也就无法通过DOM对其进行操作。...#example:before { content: ""; display: block; width: 100px; height: 100px; } 伪类元素也会像其他子元素一样正常继承父元素的一些
前言 熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,即使你有用过伪类与伪元素,但里面总有一两个你没见过的吧。...伪类与伪元素 先说一说为什么css要引入伪元素和伪类,以下是css2.1 Selectors章节中对伪类与伪元素的描述: CSS introduces the concepts of pseudo-elements...直译过来就是:css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。...下面分别对伪类和伪元素进行解释。 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。...因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素。
CSS的选择器除了根据id、class、属性等从DOM中获取元素的以外,还有很重要的一类,用来获取元素的特别内容或特别状态,这就是 伪元素(Pseudo-elements) 和 伪类(Pseudo-classes..., text-emphasis-color, text-decoration 等样式有效 [1.5] Javascript与伪元素的有限交互 因其不在dom中,无法直接对伪元素绑定事件等 可以获取伪元素的样式...的情况下用:target实现了 [2.2] 用:not过滤掉不符合的元素 :not(x)括号中可以应用几乎所有的选择器语法 :not可以搭配其他伪类使用,如用 p:not(:empty) 选择非空元素...==在*-child系列伪类中,索引是相对于所有同级兄弟元素计算的,而非特定类型== :first-child 和 :last-child Hi Apple...如果元素中有空格等内容,不会被认为是:empty [2.4] 根据索引选择特殊类型的元素 这一系列的伪类包括 :first-of-type,:last-of-type,:only-of-type,:nth-of-type
:first-letter 伪元素的样式将应用于元素文本的第一个字(母)。 :first-line 伪元素的样式将应用于元素文本的第一行。 :before 在元素内容的最前面添加新内容。...:after 在元素内容的最后面添加新内容。...伪元素和伪类的区别: 与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作...它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,甚至经常有同行将:before、:after称为伪类。...并且,为了满足用户在操作DOM时产生的DOM结构改变,伪类也可以是动态的。 其实第一段话就囊括CSS3伪类的全部定义了,这段话中指出CSS3伪类的功能有两种: 获取不存在与DOM树中的信息。...并且,一些伪元素可以使开发者获取到不存在于源文档中的内容(比如常见的::before,::after)。 伪元素的由两个冒号::开头,然后是伪元素的名称。..."lang获取不同lang属性的节点,并为之设置伪元素::after,伪元素的内容是此节点的语言类型。...最后,总结一下伪类与伪元素的特性及其区别: 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息; 伪元素本质上是创建了一个有内容的虚拟容器; CSS3中伪类和伪元素的语法不同; 可以同时使用多个伪类
伪类的常见用法和实例解析 CSS伪类和伪元素是一种特殊类型的选择器,可以用于在元素状态或者文档树中的特定位置添加样式。它们允许开发者选择一个元素的部分或者元素的部分状态,从而改变它们的样式。...下面将介绍一些常见的伪类和伪元素的用法和实例。 伪类: 伪类是一种特殊类型的选择器,可以用于选择一个元素的部分状态。例如,当鼠标悬停在元素上时,可以使用伪类 :hover 来改变元素的样式。...伪类和伪元素的常见用法: * `:link`:用于未被访问过的链接。 * `:visited`:用于用户已访问过的链接。 * `:hover`:用于鼠标指针悬停在上面的元素。...[type="checkbox"]:checked { background-color: lightgray; } 以上就是CSS伪类和伪元素的常见用法和实例,它们为开发者提供了更多的样式控制选项,可以在特定的状态下或位置应用特定的样式...本文深入探讨了CSS中伪类和伪元素的常见用法和实例解析,并附上了具体的代码示例。通过合理运用伪类和伪元素,我们可以更灵活地控制页面的样式,实现更丰富的交互效果和视觉效果。
比如一些伪类和伪元素。这里稍微提一下在实际工作中用到的一些小技巧,算是笔记。 1.focus,chenked伪类的使用。...其实道理都是一样的,利用chenked或者focus的状态,通过css来定义样式,比如用图片替代checkbox框,原理就是隐藏checkbox之后,通过label操作他的兄弟元素样式。....checkbox-wrap input:checked + label span{background-position: 0 -20px;} 在input的checked状态下改变span元素的背景图片...2.还有after一个这么强大的伪对象,在以前竟然只是被用作清除浮动,实在是大材小用暴殄天物。看下面这个demo,就是使用after和befor这对好基友,来实现切换标签的current状态小尖角。...transparent;border-style:solid; border-width:5px 4px 0px 4px;bottom:-5px; margin-left:-2px; z-index: 2; } 这样两个伪对象的嵌套
在CSS的探索之旅中,伪类和伪元素无疑为我们的样式设计增添了无限可能。它们不仅能够帮助我们精确地定位文档中的元素,还能实现丰富的交互反馈和视觉效果。...基本概念 伪类(Pseudo-classes) 伪类用于表示元素的特定状态,如用户交互(hover、active)、链接状态(link、visited)等。...它们实际上插入了新的元素到DOM树中,尽管这些元素不可见于源代码。 常见问题与易错点 1. 伪类与伪元素的区别 易错点:混淆伪类和伪元素的使用场景。...区分方法:伪类关注的是元素的状态,而伪元素则关注元素的内容或结构上的附加部分。 2....:hover与子元素伪类结合:通过:hover与子元素伪类如:first-child结合,可以实现复杂的交互效果。
伪类与伪元素的区别表示方法 CSS2 中伪类、伪元素都是以单冒号:表示,CSS2.1 后规定伪类用单冒号表示,伪元素用双冒号::表示,浏览器同样接受 CSS2 时代已经存在的伪元素(:before,...定义不同 伪类即假的类,通常可以添加类来达到效果,伪元素即假元素,需要通过添加元素才能达到效果。来看下面的例子 例 1:将一行字符串的首字母变成红色 现在不用伪元素应该如何实现?...这里,关键点在于我们创建了新的元素达到了::first-letter的作用,且不能通过添加其他类来实现这一效果,因此将::first-letter叫做伪元素而不是伪类。...伪类和伪元素分别用单冒号:和双冒号::来表示。伪类和伪元素的区别,最关键的点在于如果没有伪元素(或伪类),是否需要添加元素才能达到目的,如果是则是伪元素,反之则是伪类。...关于常用的伪类与伪元素选择器可以查看CSS选择器一文。
领取专属 10元无门槛券
手把手带您无忧上云