我们常用CSS 3.0中的伪元素来修饰一些细节，让页面看起来效果更好，比如下面这个图片中的面包屑导航中的符号，还有任务清单前的序列符号，都是用伪元素实现的。 ?...以下是代码实现，希望能对初学者有一个简单的认识。 CSS 3.0中伪元素...after和before的妙用 /* 面包屑导航 */ .breadcrumb {...first-child { color: #82fcfd; } .breadcrumb a:first-child::before
jQuery 在元素中添加插入内容的方法和区别，整理成表格，省的每次都要翻： jQuery方法 解释 after() 在被选元素之后插入指定内容 insertAfter() 在被选元素之后插入 HTML...append() 在被选元素的结尾（仍然在内部）插入指定内容 appendTo() 在被选元素的结尾（仍然在内部）插入 HTML 标记或已有的元素。...before() 在被选元素之前插入指定内容 insertBefore() 在被选元素之前插入 HTML 标记或已有的元素。如果用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。...prepend() 在被选元素的开头（仍然在内部）插入指定内容 prependTo() 在被选元素的开头（仍然在内部）插入 HTML 标记或已有的元素 千言解释不如一图示意： 具体代码： 3. before'); $target.after('4. after'); $('<
然而，由于历史原因，单冒号也可以用于表示某些伪元素，如:before、:after。这种用法在CSS2中被允许，但在CSS3中不再推荐。...关于 ::before 和 ::after 伪元素的作用： ::before 伪元素：用于在选定元素的内容前插入一个生成的内容。...::after 伪元素：用于在选定元素的内容后插入一个生成的内容。它允许在元素的结束位置插入额外的样式化内容，通常用于添加装饰性的元素或生成清除浮动的伪元素。...::before 和 ::after 伪元素可以用于在元素的内容前后插入生成的内容，用于装饰、布局等目的。 除了::before和::after之外，还有哪些常用的CSS3伪元素？...常见的单冒号(:)伪类有哪些？ 单冒号(:)用于表示 CSS 中的伪类，它们是一些用于选择特定状态或特定位置的元素的类别。以下是一些常见的单冒号伪类： :hover：当鼠标悬停在元素上时应用的样式。
使用CSS复位 CSS复位可以在不同的浏览器上保持一致的样式风格。...任何元素，任何时间，任何地点？CSS-Tricks 有篇好文 讲到了各种居中的技巧。 注意： IE11 对 flexbox 的支持有点 bug。...而且复制粘贴并不会带走CSS生成的内容,需要注意。 使用负的 nth-child 来选择元素 使用负的 nth-child 可以选择 1 至 n 个元素。...利用属性选择器来选择空链接 当 元素没有文本内容，但有 href 属性的时候，显示它的 href 属性： a[href^="http"]:empty::before { content: attr...使用选择器 :root来控制字体弹性 在响应式布局中，字体大小应需要根据不同的视口进行调整。
例如通过伪元素您可以设置段落中第一个字母的样式，或者在元素之前、之后插入一些内容等等。 在 CSS1 和 CSS2 中，伪元素的使用与伪类相同，都是使一个冒号:与选择器相连。...CSS 中提供了一系列的伪元素，如下表所示： 伪元素 例子 例子描述 ::after p::after 在每个 元素之后插入内容 ::before p::before 在每个 元素之前插入内容 ::...::after 伪元素 ::after 能够在指定元素的后面插入一些内容，在 ::after 中需要使用 content 属性来定义要追加的内容，而且在 ::after 中必须定义 content 属性才会生效...::before 伪元素 ::before 能够在指定元素的前面插入一些内容。...CSS2 之后所有新增的伪元素(如::selection)，应该采⽤双冒号的写法。 CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。
本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力什么叫伪元素css伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中...伪元素用于创建一些不在文档树中的元素，并为其添加样式。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。...比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。...实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。...它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 /* add border */ .nav li { border-right: 1px solid #666; } ……然后再除去最后一个元素...…… /* remove border */ .nav li:last-child { border-right: none; } ……可以直接使用 :not() 伪类来应用元素： .nav li:...注：在IE11中要小心flexbox。...() 伪类。...使用属性选择器用于空链接 当 元素没有文本值，但 href 属性有链接的时候显示链接： a[href^="http"]:empty::before { content: attr(href)
此方法还允许将内容正常放置在元素内。 浏览器支持情况 100% 4.使用表格居中 使用display：table（作为flexbox的替代）使子元素在其父元素中水平垂直居。...可在 CodePen 上查看真实效果和编辑代码 说明使用 ：before伪元素的样式垂直对齐内联元素而不更改其position属性。 浏览器支持程度 99.9% caniuse 9....此函数可以接收两个参数，第一个作为计数器的名称，第二个参数表示占位内容，例如 3.1的小数点。 CSS计数器对于制作轮廓列表特别有用，因为计数器的新实例是在子元素中自动创建的。...CodePen上查看和编辑代码 说明浏览器会对字体进行逐个查找，如果找到的话就是用当前的，如果找不到字体（在系统上或在CSS中定义），则继续往后查找。...CodePen上预览和编辑代码 说明使用：before和：after伪元素作为在悬停时设置动画的边框。 浏览器支持程度 100%. 35.甜甜圈旋转器 创建一个甜甜圈旋转器，可用于等待内容的加载。
使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 max-height...继承 box-sizing 表格单元格等宽 用Flexbox摆脱外边距的各种hack 使用属性选择器用于空链接 使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 /* add...注：在IE11中要小心flexbox。...() 伪类。...使用属性选择器用于空链接 当 元素没有文本值，但 href 属性有链接的时候显示链接： a[href^="http"]:empty::before { content: attr(href)
部分资料上优先级是按照计数来算的，但是并不意味着10个类选择器和一个id选择器优先级相同，上一级比下一级有永远无法逾越的差距，但是IE浏览器256个上一级选择器要比下一级的优先级大（老式浏览器8字节存储所导致的...:any-link不兼容IE11，其他浏览器兼容性良好，匹配规则如下： 匹配所有设置了href属性的链接元素，包括，和； 匹配所有匹配:link伪类或者:visited伪类的元素...:placeholder-show：占位符显示时匹配，由于占位符是在输入内容为空的时候出现，所以可以使用:placeholder-show来判断表单是否为空。...就是我们在标签中设置required或者pattern等属性的时候，会判断是否有效，匹配对应的伪类。...树结构伪类 :root匹配根元素，IE9以上才支持，在XHTML中根元素就是html，另外也可以匹配的SVG的根元素，但不能匹配Shadow DOM的的根元素，Shadow DOM的的根元素是:host
:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下： #example:before { content...'#'，以及在内容之后添加一个'$'，插入的行内元素是作为#example的子元素，效果如下: #Here is the example content$ 需要注意的是如果没有content属性，伪类元素将没有任何作用...但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。...但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。...一种更好的方法是利用CSS，所以在一些CSS文件中经常会看到类似于.clearfix这样的类出没，只要在父容器上应用这个类即可实现清除浮动。
, 预先绘制了两个 盒子模型 , 一个是 空的 盒子模型 , 在 空盒子模型 中 , 绘制了一个 子盒子 , 子盒子 是 有实际元素的 盒子模型 ; 有 实际内容 的 子盒子模型 , 初始状态就 沿着...左下角为中心点 , 顺时针旋转了 90 度 ; 如果 父容器 设置了 /* 隐藏边界之外的元素 旋转前的伪类 div::before 元素需要先隐藏...div::before 伪元素添加进去的 ; div::before 伪元素 是行内元素 无法设置大小 , 需要 将其设置为行内块元素 才能设置宽高 ; /* before 元素是行内元素...无法设置大小 将其设置为行内块元素 才能设置宽高 */ display: block; 为 实际内容 设置 旋转 相关的属性 : 旋转中心点 ,...伪元素 上的效果 */ div:hover::before { /* 鼠标移动上去后 */ transform: rotate
"; } 这个例子中提到了两件事情，第一，我们用#example:before和#example:after来目标锁定相同的元素.严格的说，在代码中他们是伪元素。...从技术上讲，你可以普遍的应用伪元素，不是放在特殊的元素上，像这样： :before { content: "#"; } 虽然上面是有效的，但是它十分的没用。...在css中，这段内容被设置了宽度，以及一些padding和可见的边框 然后我们有了伪元素。在这个例子中，它是一个散列符号插入到该段内容之前。...这里是浏览器中查看的结果： 外面的盒子是这个段落。围绕有散列符号的边框表示伪元素的边界。所以，不是插入“before”到段落，而是伪元素被置于到此段落的“Other content”的前面。...（更新：在评论中提到的，你可以使用谷歌的开发工具来查看一个伪元素相关联的风格，但不会出现在DOM元素里。同时，火狐在1.8版加入伪元素支持它。） 你所需要用有的理念是用这个技术以创造出实用的东西。
使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 /* add border */ .nav li { border-right: 1px solid #666; } ……然后再除去最后一个元素...注意：在IE11中要小心flexbox。 6....() 伪类。...使用属性选择器用于空链接 当a元素没有文本值，但 href 属性有链接的时候显示链接 a[href^="http"]:empty::before { content: attr(href); } 相当方便...禁用鼠标事件 CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。
moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } 使用 :not() 在菜单上应用...注意：在IE11中要小心flexbox。...() 伪类。...使用属性选择器用于空链接 当a元素没有文本值，但 href 属性有链接的时候显示链接： a[href^="http"]:empty::before { content: attr(href); }...pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。
: 伪元素用于创建一些不在文档树中的元素,并为其添加样式。...比如说，我们可以通过:before 来在一个元素前增加一些文本，并为这些文本添加样式。...虽然用户可以看到这些文本，但是这些文本实际上不在文档树中 伪元素前面是两个冒号，E::first-line 伪元素。...会创造出不存在的新元素，由于 css 对单冒号的伪元素也支持，单双冒号都支持,但实际上现在css3 已经明确规定了伪类单冒号，伪元素双冒号的规则,用于区分它们 ::before/:before在被选元素前插入内容...::after/:after 在被元素后插入内容，其用法和特性与:before相似::placeholder 匹配占位符的文本，只有元素设置了placeholder 属性时，该伪元素才能生效 对于伪元素
层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。...关于语法和浏览器支持 伪元素实际上在CSS1中就存在了，但是我们现在所讨论的:before和:after则发布于CSS2.1中。...在最初，伪元素的语法是使用“:”（一个冒号），随着web的发展，在CSS3中修订后的伪元素使用“::”（两个冒号），也就是::before 和 ::after—以区分伪元素和伪类（比如:hover，:active...它是做什么的 简而言之，伪元素将会在内容元素的前后插入额外的元素，因此当我们添加它们时，使用以下的标记方式，他们在技术上是平等的。...使用伪元素 使用伪元素是相对容易的，:before将会在内容之前“添加”一个元素而:after将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用content属性。
虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。 伪元素用于创建一些不在文档树中的元素，并为其添加样式。...比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。...::before/:before 在被选元素前插入内容 ::after/:after 在被元素后插入内容，其用法和特性与:before相似。...这个伪元素只能用在块元素中，不能用在内联元素中。 ::selection 匹配用户被用户选中或者处于高亮状态的部分。在火狐浏览器使用时需要添加-moz前缀。该伪元素只支持双冒号的形式。...在一些浏览器中（IE10和Firefox18及其以下版本）会使用单冒号的形式。
68） 另外，还可以在非列表项上使用::marker伪元素。...::marker伪元素中的content属性在规范中是最近添加的，但在Firefox 68中也已支持。...遗憾的是，目前无法通过功能查询来检测选择器对::marker伪元素的支持，尽管已经有一个关于将其添加到规范中的ISSUE。这意味着，无法针对不支持的浏览器环境区分处理。...h2 { counter-increment: heading-counter; } 为了查看结果，我们需要将内容输出到文档中，可以通过给标题的::before伪元素设置content来生成内容。...（查看示例） 这在实际中有多高的使用性是值得商榷的，对于上面例子中计数器生成的值，最大的作用也就是将其在输出内容中展示。
一、CSS计数器三角关系 CSS计数器只能跟content属性在一起的时候才有作用，而content属性貌似专门用在before/after伪元素上的。...于是，就有了，“计数器↔伪元素↔content属性”的铁三角关系。...2变成了3，wangxiaoer就是这里的计数器，自然伪元素content值counter(wangxiaoer)就是3. ② 当然，也可以普照自身，也就是counter-increment直接设置在伪元素上...还是要记住这一句话：“一个容器里的普照源(reset)是唯一的”，所以，如果你不小心把计数显示和技术reset元素以兄弟元素形式放在一起（虽然HTML内容布局呈现是没有异常的），就很可能会出现计数序号乱入的情况...所以，我们可以在头尾放两个差距甚远的列表，然后，这些列表自动显示序号。而ol/ul只能写死start实现，很不灵活，一旦列表有删减，就嗝屁了。 由于计数器是伪元素控制显示的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
