DOCTYPE html> 68-伪元素选择器 <style...background-color: pink; display: block; } div::after{ /*指定添加的子元素中存储的内容...-- 1.什么是伪元素选择器?...伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素 2.格式: 标签名称::before{ 属性名称:值; } 给指定标签的内容前面添加一个子元素...标签名称::after{ 属性名称:值; } 给指定标签的内容后面添加一个子元素 --> <!
在CSS的探索之旅中，伪类和伪元素无疑为我们的样式设计增添了无限可能。它们不仅能够帮助我们精确地定位文档中的元素，还能实现丰富的交互反馈和视觉效果。...它们实际上插入了新的元素到DOM树中，尽管这些元素不可见于源代码。 常见问题与易错点 1. 伪类与伪元素的区别 易错点：混淆伪类和伪元素的使用场景。...双冒号与单冒号的使用 问题描述：CSS3规范中，伪元素推荐使用双冒号(::)，而伪类仍使用单冒号(:)，但在旧版浏览器中，双冒号可能不被支持。...注意事项：保持逻辑清晰，通常先写伪类再写伪元素，并注意CSS特性的优先级规则。 4. 使用content属性 问题描述：在伪元素中忘记使用content属性，导致样式不生效。...希望本文能成为你探索CSS高级选择器路上的一盏明灯。
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选择器用于选择活动链接。
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。...//本篇文章都使用这个结构代码来做演示 //lorem加上Tab键快速生成一段测试英文 Lorem ipsum dolor, sit amet consectetur adipisicing...::before和::after ::before表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用 代码演示?...注意： before和after创建一个元素，但是属于行内元素。 新创建的这个元素在文档中是找不到的，所以我们称为伪元素。...before在父元素内容的前面创建元素，after在父元素内容的后面插入元素。 伪元素选择器和标签选择器一样，权重为1。 ---- 没有所谓失败，除非你不再尝试！
CSS3 浏览器支持情况 网址查询：caniuse.com CSS3的伪类选择器（一） 动态伪类选器 a:link{} a:visited{} a:hover{} a:active{} UI元素状态伪类选择器... html部分： // disable 是状态 CSS部分：（根据状态确定样式） input :enable{} input:disable{} CSS3的伪类选择器（二） 结构伪类选择器.../li> css...li:empty{} 选中的li标签父元素是空的 伪元素 html: css: .demo::first-letter{} 文本段落首字 .demo::first-line...{} 文本段落首行 .demo::before{ //demo之前 content:; //伪元素的content属性必须要有，不设置也要有，留空 } .demo::after{
一、CSS3 伪元素选择器 ---- CSS3 伪元素选择器 : ::before 选择符 : 在 指定的标签元素内部的 前面 插入内容 ; ::after 选择符 : 在指定的标签元素内部的 后面 插入内容..., 需要 将显示模式 display 转为块级元素 block 或 行内块元素 inline-block ; 伪元素本质 : 在 dom 中看不到插入的元素 ; 权重 : 伪元素选择器 的权重 与 标签选择器...权重相同 , 权重为 1 ; 区分 伪元素选择器 与 伪类选择器 : 伪类选择器 有一个冒号 , 如 : a:hover 表示鼠标经过 a 标签上的样式 ; 伪元素选择器 有两个冒号 ; 二、CSS3...伪元素选择器权重 ---- 伪元素选择器 的权重 与 标签选择器 权重相同 , 权重为 1 ; 属性选择器 , 伪类选择器 的 权重 , 与 类选择器 权重相同 , 都是 10 ; 参考 【CSS】CSS...特性 ③ ( CSS 优先级 | 权重叠加计算公式 ) 本博客中的 权重公式 ; 权重叠加计算公式示例 : 根据下面的 基础选择器 权重 表格 , 进行权重叠加计算 ; CSS 选择器 选择器优先级
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。...伪类的种类 伪元素的种类 区别 这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。...那么我们接着看看为元素： p:first-letter {color: red}I am stephen lee.... 总结 伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。...:Pseudo-classes::Pseudo-elements 但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。
定义 伪类 CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。 例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。.../* 所有用户指针悬停的按钮 */ button:hover { color: blue; } 伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。...伪元素 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。 下例中的 ::first-line 伪元素可改变段落首行文字的样式。 /* 每一个 元素的第一行。... 如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个元素，并设置该span元素的样式： Hello World, and...总结 1.伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息； 2.伪元素本质上是创建了一个有内容的虚拟容器； 3.CSS3中伪类和伪元素的语法不同； 4.可以同时使用多个伪类，而只能同时使用一个伪元素
CSS伪元素的基本使用 上一篇文章介绍了很多个伪类的使用，这篇来说一下伪元素。 伪元素之所以称为“伪”，主要是因为它不是真正网页里的元素，但是标线行为又跟真正网页元素一样，也可以对其使用css操作。...伪元素比较少，今天就一个个的用法，不分门别类了。 一、::after和::beore after和before用的比较多一些。...: '*'; color: red } 二、::before 略 三、::cue 匹配所选元素中的WebVTT提示。...这可以用于在VTT轨道的媒体中使用字幕和其他线索。多使用在视频的文本显示上。...模板 中的元素，这对于我们现在使用框架而不是再自创标签的用户来说，很少会用到
document.querySelectorAll()[4]返回所有匹配的HTML元素，这些元素位于类数组NodeList[5]中。 伪类选择器根据HTML元素的当前状态来定位它们。...或video元素 浏览器最近又收到了三个伪类选择器… :is伪类选择器 注意：这最初被指定为:matches()和:any()，但:is()已经成为CSS标准。...MDN解释：:is()CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。 你经常需要在不止一个元素上面应用相同的样式。...任何选择器的语法错误都会破坏所有元素的样式。 像Sass这样的CSS预处理器允许嵌套（这也将出现在原生CSS[6]中）。...*/ h2 { margin-block-start: 2em; } :has()伪类选择器 :has()选择器使用了类似于:is()和:where()的语法，但它的目标是一个包含其他元素的元素。
除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。...；（使用不是非常广泛） 没有任何的子元素，包括空格. 3、目标伪类 E:target 结合锚点进行使用，处于当前锚点的元素会被选中； CSS (...四、伪元素选择器 重点：E::before、E::after 是一个行内元素，需要转换成块元素 E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before...E::selection 可改变选中文本的样式； ":" 与 "::" 区别在于区分伪类和伪元素 关于before和after CSS2中 E:before或者E:after，是属于伪类的...，并且没有伪元素的概念 CSS3中 提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者 E:after伪类;
什么是伪元素 伪元素表示了某个元素的子元素。这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。 因为伪元素并不在文档树中，所以通过JS，也抓取不到伪元素，也不能给它绑事件。...语法 伪元素以::开头。 在CSS1和CSS2中，伪元素和伪类一样，都是用:开头。但在CSS3中，伪元素以::开头，用以和伪类进行区分。 IE8不支持::。因此如果要兼容IE8，只能用:。...常见的伪元素 ::before 在当前元素的内容的前面插入一个子元素。插入的元素为内联元素。 需要注意的是，使用::before时， 必须使用content来指定子元素的内容。...什么时候用伪元素 HTML 标签的目的，就是为了展示内容信息。非内容信息要使用伪元素。 具体的使用场景是图标和清除浮动。 所谓的非内容信息，指的是一些对内容进行修饰的信息。...相关文章 CSS伪元素的一些坑
伪元素技巧 在 CSS 伪元素基本用法一文中讲述了伪元素的基础功能，本章学习一些进阶功能，看看伪元素能实现哪些方便好用的功能。...10px; padding: 5px; } .inner { float: left; width: 80px; height: 80px; border: 1px solid; } 使用伪元素清除浮动的办法...clear 属性可以对应的属性值有： left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。...''; position: absolute; top: -20px; right: -20px; bottom: -20px; left: -20px; } 还有一种不使用伪元素扩大可点击范围的方式是使用...通过在 content 中使用 attr 函数可以调用元素的属性。
也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...结构性伪类 CSS3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。...实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。...比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。 CSS3规范中要求使用单冒号:用于CSS3伪类，双冒号::用于 CSS3伪元素，目的是区分伪类和伪元素。...常见的伪元素选择器 ::first-letter 选择元素文本的第一个字 ::first-line 选择元素文本的第一行 ::before 在元素内容的最前面添加新内容 ::after 在元素内容的最后面添加新内容
CSS 伪类 选择器 例子 例子描述 :active a:active 选择活动的链接。 :checked input:checked 选择每个被选中的 元素。...:disabled input:disabled 选择每个被禁用的 元素。 :empty p:empty 选择没有子元素的每个 元素。...:not(selector) :not(p) 选择每个非 元素的元素。 :nth-child(n) p:nth-child(2) 选择作为其父的第二个子元素的每个 元素。...:out-of-range input:out-of-range 选择值在指定范围之外的 元素。...CSS 伪元素 选择器 例子 例子描述 ::after p::after 在每个 元素之后插入内容。 ::before p::before 在每个 元素之前插入内容。
伪类与伪元素 先说一说为什么css要引入伪元素和伪类，以下是css2.1 Selectors章节中对伪类与伪元素的描述： CSS introduces the concepts of pseudo-elements...直译过来就是：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...伪元素是使用单冒号还是双冒号 CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号...大概的意思就是：虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，我们建议你在目前还是使用单冒号的写法。...下面是根据用途分类的伪类总结图和根据冒号分类的伪元素总结图： ? ? 某些伪类或伪元素仍然处于试验阶段，在使用前建议先在Can I Use等网站查一查其浏览器兼容性。
在selenium webdriver中，支持使用CSS选择器来进行元素定位，事实在真的投入工作，大量编辑用例和元素定位的时候，使用css 和 xpath才是经常需要用到的。...之前有专门讲过使用xpath对元素定位的使用，下面要介绍css选择器来进行元素定位。...(by=By.CSS_SELECTOR, value=css_selector) 常见语法 CSS选择器用于选择你想要的元素的样式的模式。..."CSS"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。...选择器 示例 示例说明 CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * 选择所有元素
伪元素 ::before，::after 1. 空元素(不能包含内容的元素)不支持 ::before，::after IE 不支持的元素有：img，input，select，textarea。...必须设置 content 属性 若不设置，则伪元素不会显示。如果不想设置 content 的内容，可以将内容设置为空。...若 content 的属性值不遵循如上要求，则伪元素不会显示。 4. content 的属性值中如何设置特殊字符？...伪元素 ::first-letter，::first-line 只对 display 为 block 和 inline-block 之类的块级元素有效。...对内容的开头是符号，或者第一个是英文字母或数字，第二个是符号的，使用 ::first-letter 来设置样式时，会对第一个字母和符号都生效。好违反直觉。
背景 写了这么多年代码，对CSS中的伪类和伪元素竟然没有细致的进行过学习总结，由此可见在实际代码开发中，用的也确实不多，也就用过一些:first-child,:hover之类的吧，其它的连before...伪类和伪元素 伪类：是以一个冒号作为前缀，被添加到选择器的末尾，当你希望在特定状态下(:hover)才被呈现到指定元素时，可以往元素的选择器后面加上伪类。...伪元素：用于创建一些不在文档树中的元素，并为其添加样式。比如::before是指得元素前添加文本，且为文本添加样式，虽然用户可以看到这些文本，但文本实际不在DOM结构中。...常用的伪类和伪元素 伪类可以从状态类伪类、结构类伪类、其它伪类和表单相关伪类进行分类。...url：引用媒体文件(比如图片) attr:可以调用当前元素内的某个属性(比如a标签的href属性) counter计数器：可以不使用列表元素实现序号功能。
css04.css 1 /*属性选择器相关样式*/ 2 3 4 [love] { 5 color: green; 6 } 7 8 [love="me"] { 9...ch-zn"> 3 4 5 Title 6 7 8 div>[class^=first] { 9 color:yellow; 10 } 11 div>[class$=CD] { 12 color: aqua...1 补充示例 31 属性选择器 2 补充示例 32 属性选择器 3 补充示例... 33 属性选择器 4 补充示例 34 属性选择器 5 补充示例 35 <p
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
