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选择器用于选择活动链接。
DOCTYPE html> 68-伪元素选择器 <style...*/ content: "么么哒"; /*指定添加的子元素的宽度和高度*/ width: 50px; /*...-- 1.什么是伪元素选择器?...伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素 2.格式: 标签名称::before{ 属性名称:值; } 给指定标签的内容前面添加一个子元素...标签名称::after{ 属性名称:值; } 给指定标签的内容后面添加一个子元素 --> <!
一、CSS3 伪元素选择器 ---- CSS3 伪元素选择器 : ::before 选择符 : 在 指定的标签元素内部的 前面 插入内容 ; ::after 选择符 : 在指定的标签元素内部的 后面 插入内容..., 需要 将显示模式 display 转为块级元素 block 或 行内块元素 inline-block ; 伪元素本质 : 在 dom 中看不到插入的元素 ; 权重 : 伪元素选择器 的权重 与 标签选择器...权重相同 , 权重为 1 ; 区分 伪元素选择器 与 伪类选择器 : 伪类选择器 有一个冒号 , 如 : a:hover 表示鼠标经过 a 标签上的样式 ; 伪元素选择器 有两个冒号 ; 二、CSS3...伪元素选择器权重 ---- 伪元素选择器 的权重 与 标签选择器 权重相同 , 权重为 1 ; 属性选择器 , 伪类选择器 的 权重 , 与 类选择器 权重相同 , 都是 10 ; 参考 【CSS】CSS...important 权重无穷大 div::before 选择器是由 标签选择器 和 伪元素选择器 结合而成的 , 标签选择器 的权重为 0,0,0,1 ; 伪元素选择器 的权重为 0,0,0,1 ;
CSS3 浏览器支持情况 网址查询：caniuse.com CSS3的伪类选择器（一） 动态伪类选器 a:link{} a:visited{} a:hover{} a:active{} UI元素状态伪类选择器... html部分： // disable 是状态 CSS部分：（根据状态确定样式） input :enable{} input:disable{} CSS3的伪类选择器（二） 结构伪类选择器...{} 限定是第一个li标签子元素 li:last-of-type{} 限定是最后一个li标签子元素 li:only-child{} 选择的元素是它父元素只有一个子元素...li:only-of-type{} 选择的元素是它父元素只有一个子元素，但是限制子元素的标签类型为li li:empty{} 选中的li...标签父元素是空的 伪元素 html: css: .demo::first-letter{} 文本段落首字 .demo::first-line{} 文本段落首行 .demo::before{
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。...::before和::after ::before表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用 代码演示?...注意： before和after创建一个元素，但是属于行内元素。 新创建的这个元素在文档中是找不到的，所以我们称为伪元素。...before在父元素内容的前面创建元素，after在父元素内容的后面插入元素。 伪元素选择器和标签选择器一样，权重为1。 ---- 没有所谓失败，除非你不再尝试！
:first-letter 伪元素的样式将应用于元素文本的第一个字（母）。 :first-line 伪元素的样式将应用于元素文本的第一行。 :before 在元素内容的最前面添加新内容。...:after 在元素内容的最后面添加新内容。...伪元素和伪类的区别： 与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作...它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。... 选择某个元素的第一个子元素； :last-child 选择某个元素的最后一个子元素； :nth-child() 选择某个元素的一个或多个特定的子元素； :nth-last-child() ...选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算； :nth-of-type() 选择指定的元素； :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算...四、伪元素选择器 重点：E::before、E::after 是一个行内元素，需要转换成块元素 E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before...，并且没有伪元素的概念 CSS3中 提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者 E:after伪类;
虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。 状态性伪类 是基于元素当前状态进行选择的。...结构性伪类 CSS3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。...常见的伪元素选择器 div:first-child 选择属于其父元素的第一个子元素的每个div元素 div:last-child 选择属于其父元素最后一个子元素的每个div元素 div:nth-child...实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。...常见的伪元素选择器 ::first-letter 选择元素文本的第一个字 ::first-line 选择元素文本的第一行 ::before 在元素内容的最前面添加新内容 ::after 在元素内容的最后面添加新内容
实际上，伪元素使用单冒号还是双冒号很难说得清谁对谁错，你可以按照个人的喜好来选择某一种写法。 4.伪类与伪元素的具体用法 这一章以含义解析和例子的方式列出大部分的伪类和伪元素的具体用法。...1 :link 选择未访问的链接 2 :visited 选择已访问的链接 3 :hover 选择鼠标指针浮动在其上的元素 4 :active 选择活动的链接 5 :focus 选择获取焦点的输入字段 结构化...1 :not 一个否定伪类，用于匹配不符合参数选择器的元素。...选择位置序号是2的倍数的元素，”Beta”, “Delta”, “Zeta”, “kappa”会变成橙色: ? 选择位置序号为偶数的元素： ?...选择从第6个开始，位置序号是2的倍数的元素，”Zeta”, “Theta”, “Kappa”会变成橙色： ?
利用伪元素:after清除浮动 让页面呈现多列布局时经常会使用 float:left/right ，可是浮动布局会导致父元素的高度为0（未设置高度的情况下），不会根据子元素的高度而变化，另外，后面不需要浮动想在下一行显示的标签出现在浮动元素的后面...所以我们在使用浮动进行布局的时候会需要一个块级元素（行内元素无效）来设置 clear 属性，如果浮动元素下方本来就有元素，那我们可以直接对该元素设置 clear:both ，若没有其他元素需要展示，我们往往会写一个空白标签来清除浮动... 但是这样无疑会增加浏览器的渲染负担，所以考虑使用伪元素 :after 来代替这个空白标签，因为清除浮动需要在浮动元素后面，所以不可以使用...:before ，对 :after 设置 content:"" ，并使其 display:block 成为块级元素后 clear:both 来清除浮动： #content:after{content:"
什么是伪元素 伪元素表示了某个元素的子元素。这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。 因为伪元素并不在文档树中，所以通过JS，也抓取不到伪元素，也不能给它绑事件。...语法 伪元素以::开头。 在CSS1和CSS2中，伪元素和伪类一样，都是用:开头。但在CSS3中，伪元素以::开头，用以和伪类进行区分。 IE8不支持::。因此如果要兼容IE8，只能用:。...::first-line 选择当前元素的第一行。 需要注意的是，其只作用于块级元素[注1]。...::first-letter 选择第一个字母。 更详细的介绍见这里。 ::selection 选中当前元素中，选中的文字。 ?...相关文章 CSS伪元素的一些坑
背景 写了这么多年代码，对CSS中的伪类和伪元素竟然没有细致的进行过学习总结，由此可见在实际代码开发中，用的也确实不多，也就用过一些:first-child,:hover之类的吧，其它的连before...什么的都没用过，于是迫切需要大于伪元素与伪类进行一个系统整体的学习。...伪类和伪元素 伪类：是以一个冒号作为前缀，被添加到选择器的末尾，当你希望在特定状态下(:hover)才被呈现到指定元素时，可以往元素的选择器后面加上伪类。...伪元素：用于创建一些不在文档树中的元素，并为其添加样式。比如::before是指得元素前添加文本，且为文本添加样式，虽然用户可以看到这些文本，但文本实际不在DOM结构中。...常用的伪类和伪元素 伪类可以从状态类伪类、结构类伪类、其它伪类和表单相关伪类进行分类。
伪元素技巧 在 CSS 伪元素基本用法一文中讲述了伪元素的基础功能，本章学习一些进阶功能，看看伪元素能实现哪些方便好用的功能。...; padding: 5px; } .inner { float: left; width: 80px; height: 80px; border: 1px solid; } 使用伪元素清除浮动的办法...lz5z.com/assets/img/avatar.svg); } 计数器 counter counter-reset：创建或者重置一个计数器 counter-increment：计数器递增 content：配合伪元素插入内容.../li> Amazon Facebook 一共选择了...{ background: green; border: 2px solid green; color: #fff; content: "\2714"; } 最后 在网上还有很多关于伪元素的用法
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。...伪类的种类 伪元素的种类 区别 这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。...p>i:first-child {color: red} first second i标签的第一个元素，也就是first，颜色会变红。...那么我们接着看看为元素： p:first-letter {color: red}I am stephen lee.... 总结 伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
CSS 引入伪类和伪元素的概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...2.伪类和伪元素的概念 2.1 伪类： 伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。...3.伪类列举 伪类和伪元素-1.png 3.1 状态伪类 状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。...active 选择正在活动的链接 :focus input:focus 选择获得焦点的输入框 3.2 结构化伪类 结构化伪类是 CSS3 新增选择器，利用 DOM 树进行元素过滤，通过文档结构的互相关系来匹配元素...4 伪元素列举 伪类和伪元素-2.png 4.1 单双冒号 选择器 示例 示例说明 ::before/:before 在被选元素前插入内容 需要使用 content 属性来指定要插入的内容。
定义 伪类 CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。 例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。.../* 所有用户指针悬停的按钮 */ button:hover { color: blue; } 伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。...伪元素 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。 下例中的 ::first-line 伪元素可改变段落首行文字的样式。 /* 每一个 元素的第一行。...分类 伪类 ? 伪元素 ?...总结 1.伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息； 2.伪元素本质上是创建了一个有内容的虚拟容器； 3.CSS3中伪类和伪元素的语法不同； 4.可以同时使用多个伪类，而只能同时使用一个伪元素
熟悉前端的人都会听过css的伪类与伪元素，然而大多数的人都会将这两者混淆(包括我)。那今天就让我们来看看伪类和伪元素的区别吧!...伪类与伪元素 先说一说为什么css要引入伪元素和伪类，以下是css2.1 Selectors章节中对伪类与伪元素的描述： CSS introduces the concepts of pseudo-elements...直译过来就是：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...:checked 被选中的input元素 :empty 匹配没有子元素的元素 :valid 匹配条件验证正确的表单元素。 伪元素 伪元素前面是两个冒号，E::first-line 伪元素。...伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。
实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。...比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。 伪类的分类：状态伪类和结构性伪类 状态伪类：是基于元素当前状态进行选择的。...结构性伪类：是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。...常见的结构性伪类包括： :first-child 选择某个元素的第一个子元素； :last-child 选择某个元素的最后一个子元素； :nth-child() 选择某个元素的一个或多个特定的子元素...常见的伪元素选择器： ::first-letter 选择元素文本的第一个字（母）。 ::first-line 选择元素文本的第一行。 ::before 在元素内容的最前面添加新内容。
什么是伪元素 伪元素用于向某些选择器设置特殊效果。 已存在元素是指DOM中存在的，伪元素则是虚拟的一种，样式也是给这个虚拟的元素使用的。...而jQuery的选择器都是基于DOM元素的，因此也并不能直接操作伪元素。 哪些是伪元素 :first-letter：向文本的第一个字母添加特殊样式。 ...::selection：CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。（只支持双冒号的形式）。 ...更改伪元素的样式 1、更换class来实现伪元素属性值的更改： // CSS代码 .red::before { content: "red"; color: red; } .green::before...但是伪元素的内容只存在于CSS渲染树中，并不存在于真实的DOM中。所以为了seo优化，最好不要在伪元素中包含与文档相关的内容。 修改伪元素的样式，建议使用通过更换class来修改样式的方法。
伪元素 CSS 中可以利用伪元素给 DOM 元素添加特殊的样式。比如说，我们可以通过 :before 在一个元素前增加一些文本，并为这些文本添加样式。...CSS3 规范中要求使用双冒号(::)添加伪元素，用以区分伪元素和伪类，比如 ::before 是伪元素，:hover 是伪类。...注意： 在一个使用了 :first-letter 伪元素的选择器中，只有很小的一部分 css 属性能被使用 ::first-letter :first-line :first-line 用来获取 块状元素...html: HelloWorld css: h1:first-line { background: orange; } 在一个使用了 ::first-line 伪元素的选择器中...，只有很小的一部分css属性能被使用 ::first-line ::selection ::selection 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分），该伪元素只支持双冒号的形式
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
