伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。...::before和::after ::before表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用 代码演示?... p::after{ content: "hahaha"; color: red; } p:...注意： before和after创建一个元素，但是属于行内元素。 新创建的这个元素在文档中是找不到的，所以我们称为伪元素。...before在父元素内容的前面创建元素，after在父元素内容的后面插入元素。 伪元素选择器和标签选择器一样，权重为1。 ---- 没有所谓失败，除非你不再尝试！
一、CSS3 伪元素选择器 ---- CSS3 伪元素选择器 : ::before 选择符 : 在 指定的标签元素内部的 前面 插入内容 ; ::after 选择符 : 在指定的标签元素内部的 后面 插入内容...; CSS3 伪元素选择器注意事项 : content 属性 : 上述两个选择器 必须设置 content 属性 ; 元素类型 : 上述两个选择器 添加 的元素 是 行内元素 ; 如果要为其配置宽高...权重相同 , 权重为 1 ; 区分 伪元素选择器 与 伪类选择器 : 伪类选择器 有一个冒号 , 如 : a:hover 表示鼠标经过 a 标签上的样式 ; 伪元素选择器 有两个冒号 ; 二、CSS3...伪元素选择器权重 ---- 伪元素选择器 的权重 与 标签选择器 权重相同 , 权重为 1 ; 属性选择器 , 伪类选择器 的 权重 , 与 类选择器 权重相同 , 都是 10 ; 参考 【CSS】CSS...- 权重计算 继承父标签的样式 , * 通配符选择器 0,0,0,0 标签选择器 / 伪元素选择器 0,0,0,1 类选择器 / 伪类选择器 / 属性选择器 0,0,1,0 ID 选择器 0,1,0,0
除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。...四、伪元素选择器 重点：E::before、E::after 是一个行内元素，需要转换成块元素 E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下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伪类;
在学习结构性伪类选择器之前，先了解2个概念：CSS中的伪类选择器和伪元素： 1、伪类选择器：CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种...，如a:link|a:visited|a:hover|a:active 2、伪元素选择器：并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器 CSS中有如下四种伪元素选择器...为某个元素的第一行文字使用样式； 2）first-letter:为某个元素中的文字的首字母或第一个字使用样式； 3）before:在某个元素之前插入一些内容； 4）after...: 在某个元素之后插入一些内容； 使用方法：选择器：伪元素{样式} 在后续的文章中会详细介绍伪类选择器的具体使用方法，本文主要是要介绍nth-child、nth-last-child...其他几种结构性伪类选择器这里就不做详细介绍了。这里主要是对比三种选择器。
CSS3新特性-结构伪类选择器 在CSS3中新增了一个结构伪类选择器，它能用更加简洁的代码，实现我们的某些需求。...定义：结构伪类选择器主要根据的是文档的结构来选择元素，常常用在根据父级选择器选出某些想要的子元素。
click事件 块级元素才能有:before, :after，譬如img就不能设置，亦即某些元素是没有:before, :after的，只要知道一般的块级元素都可以用就行了 注：css3中，为了与伪类区分...，伪元素前应该使用两个冒号，即:hover伪类，::before伪元素。...当主元素实在没办法扩大自身的时候，可以利用:before, :after来实现可点区域的扩大，还记得伪元素的特性之一，伪元素属于主元素，点伪元素就是点击主元素。...实现动态信息 如果你认为伪元素只能实现静态label，那就把CSS3想得简单了。...:before, :after的content属性的值除了是静态字符串之外，还有其他的一些特殊值，其中一个是attr(...)
简而言之：伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。 应用场景 简单说几个最常见的例子吧。...语法： /* CSS3 语法 */ element::before { 样式 } /* （单冒号）CSS2 过时语法 (仅用来支持 IE8) */ element:before { 样式 } /*...; } 3.2、::after ::after在元素内部的后面插入内容。 CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。...语法: element:after { style properties } /* CSS2 语法 */ element::after { style properties } /* CSS3...另外新创建的元素在文档树中是找不到的 before 和 after 必须有content 属性 before 在父元素内容前面创建元素，after 在元素内容的后面插入元素 伪元素选择器和标签选择器一样
在科学上没有平坦的大道，只有不畏劳苦，沿着陡峭山路攀登的人，才有希望达到光辉的顶点——马克思 我们可以使用::before和::after去选择我们节点内部的首项或尾项 例如我这里代码如下 <!...border: 0.1em solid #ababab; text-align: center; } .ruben-parent::before, .ruben-parent::after...background: #76838f; transition: 0.5s; } .ruben-parent:hover::before, .ruben-parent:hover::after...div class="ruben-parent"> ruben 页面渲染后节点如下，多了一个::before和一个::after
前言 很多小伙伴对css选择器表示不屑，觉得很简单没必要学习，其实你究竟了解多少呢？当面试官问你的时候，你能分出哪些是css3新增的选择器，他们兼容如何？又该如何处理呢？...css3选择器分类 css3选择器在最新的版本中作为一个独立的模块分离了出来，而css选择器有哪些呢？又该如何分类，请看下图。 ?...兼容ie9+ 结构伪类 数量最多的一类，：first-child(css2),:last-child(css3),nth-child(n)筛选第几个，nth-last-child,nth-of-type...[endif]- -> 注意事项 Selectivizr自动检测最佳的JavaScript库，如果你JavaScript库都没有调用，则IE下的伪类是不起作用的。...由于安全原因，样式文件需以域的形式调用，像是file:是不起作用的。 此效果非动态的。一旦样式被应用就被固定了，DOM改变时不会映射过去的。
我把CSS3分为了：CSS选择器、CSS属性、CSS模型框架三部分。...注：CSS优先级从大到小为：行内CSS>内嵌式CSS>外联CSS and CSS优先级从大到小为：ID选择器>伪类选择器>类选择器>标签选择器>通用选择器 （两种分类不同）其中在属性值的后面加上“！...---- 第三部分：其他选择器 ---- 伪类选择器 伪类动态选择器，我觉得就是一个HTML元素在点击之前、之后、点击瞬间和悬停这四种情况的临时样式。.........比如是否可见 标签名：enabled 表示可见的HTML属性 ； disenabled同理 标签名：checked 表示选中的HTML元素 比如单选框、复选框 标签名：not() 否定伪类...222 333 p:not(#b){ color: red; } ---- 最后一个比较好玩的东西是 目标伪类选择器
点此浏览原作者的其他文章 事实上，的确有一些CSS家族的成员（CSS选择器）被分类为伪元素比如：:first-line, :first-letter, ::selection, :before and...因此，本文中的“伪元素”将特指这两个伪元素（:before 和 :after），我们将从基础入手，来研究这个独特的主题。...关于语法和浏览器支持 伪元素实际上在CSS1中就存在了，但是我们现在所讨论的:before和:after则发布于CSS2.1中。...在最初，伪元素的语法是使用“:”（一个冒号），随着web的发展，在CSS3中修订后的伪元素使用“::”（两个冒号），也就是::before 和 ::after—以区分伪元素和伪类（比如:hover，:active...3D按钮 这是一个非常聪明的实现，利用伪元素结合CSS3 box-shadow 来绘制一个令人吃惊的3D按钮，仅仅使用了CSS和单一的锚文本。伪元素:before 被用来在按钮的左侧添加数字“1”。
'#'，以及在内容之后添加一个'$'，插入的行内元素是作为#example的子元素，效果如下: #Here is the example content$ 需要注意的是如果没有content属性，伪类元素将没有任何作用...但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。...需要注意的是如果没有content属性，伪类元素将没有任何作用。...但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。...:after { content:""; display:table; } .clearfix:after { clear:both; } /* For IE 6/7 (trigger
::before和::after伪元素的用法 一、介绍 css3为了区分伪类和伪元素，伪元素采用双冒号写法。...常见伪元素——::first-letter,::first-line,::before,::after,::selection。...所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。 举例：网站有些联系电话，希望在它们前加一个icon☎，就可以使用:before伪元素，如下： <!...原效果来自：Multiple Backgrounds and Borders with CSS 2.1 这个效果看的真的是脑洞大开，虽然多背景图用css3的background-image很容易就能实现...但是这篇文章是10年写的，已经过去5年了，想想也正是他们这样的尝试和努力才加速了css3标准的制定，让今天的开发更easy。今天的我们又能为5年后的开发人员做些什么贡献呢？
利用伪元素:after清除浮动 让页面呈现多列布局时经常会使用 float:left/right ，可是浮动布局会导致父元素的高度为0（未设置高度的情况下），不会根据子元素的高度而变化，另外，后面不需要浮动想在下一行显示的标签出现在浮动元素的后面...那我们可以直接对该元素设置 clear:both ，若没有其他元素需要展示，我们往往会写一个空白标签来清除浮动 但是这样无疑会增加浏览器的渲染负担，所以考虑使用伪元素...:after 来代替这个空白标签，因为清除浮动需要在浮动元素后面，所以不可以使用 :before ，对 :after 设置 content:"" ，并使其 display:block 成为块级元素后...clear:both 来清除浮动： #content:after{content:"";display:block;clear:both;} ?
一、CSS3 简介 ---- CSS3 是在 CSS2 基础上进行扩展后的样式 ; 在 移动端 对 CSS3 的支持 要比 PC 端支持的更好 , 建议在移动端开发时 , 多使用 CSS3 ; PC 端老版本浏览器不支持...CSS3 , 尤其是 IE 9 及以下的版本 , 基本无法使用 CSS3 ; CSS3 提供了三种选择器 : 属性选择器 结构伪类选择器 伪元素选择器 二、CSS3 属性选择器权重 ---- CSS3...提供了三种选择器 : 属性选择器 结构伪类选择器 伪元素选择器 属性选择器 , 伪类选择器 的 权重 , 与 类选择器 权重相同 , 都是 10 ; 参考 【CSS】CSS 特性 ③ ( CSS 优先级..., * 通配符选择器 0,0,0,0 标签选择器 0,0,0,1 类选择器 / 伪类选择器 / 属性选择器 0,0,1,0 ID 选择器 0,1,0,0 标签的行内样式 style 属性 1,0,0,0...important 权重无穷大 三、CSS3 属性选择器 ---- CSS3 属性选择器 可以 使用特定的 CSS 属性 和 属性值 来 选择 特定 的 HTML 标签元素 ; CSS3 属性选择器
目录 一、属性选择器 二、关系选择器 三、结构化伪类选择器 四、伪元素选择器 五、链接伪类 CSS选择器的作用就是从HTML页面中找出特定的某类元素。...常用的几类CSS选择器如下表所示。 伪选择器比较特殊，分为伪元素和伪类元素两种。...2个或倒数第2个子元素，这两个选择器就不起作用了。...为此，CSS3引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选择器的扩展。...:after选择器 :after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。 五、链接伪类 1.链接伪类 在CSS中，通过链接伪类可以实现不同的链接状态。
li+a） 属性选择器（a[rel="external"]） 伪类选择器（a:hover,li:nth-child） 伪元素选择器（::before、::after） 通配符选择器（*） 3....::before 和 :after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 相关知识点： 单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。...不过浏览器需要同时支持旧的已经存在的伪元素写法，比如 :first-line、:first-letter、:before、:after 等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。...如果按堆栈视角，::after 生成的内容会在 ::before 生成的内容之上。 4. 伪类与伪元素的区别 css 引入伪类和伪元素概念是为了格式化文档树以外的信息。...如果项目只有一根轴线，该属性不起作用。 以下6个属性设置在项目上： order属性 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
CSS3新特性 word-wrap：break-word; text-shadow: 5px 5px 5px #ff0000 box-shadow: 10px 10px 5px #888888...border-radius: 50%; border-image: url(border.png) 30 30 round 元素和伪元素：1 类选择器、属性选择器或伪类：10 id选择符：100...声明的样式优先级最高 清除浮动的几种方式 添加空div，使用clear: both; 父元素使用overflow: hidden; 父元素使用overflow: auto; 父级定义高度 父级div定义伪类...:after和zoom .clearfloat { *zoom: 1; } .clearfloat:after { content: ""; height: 0;...greenyellow; } display：none; 不显示对应的元素 visibility：hidden; 隐藏对应元素 position：absolute/fixed; 优先级最高 float不起作用
一、CSS3 结构伪类选择器 ---- 常见的 结构伪类选择器 : E:first-child 选择器 : E 表示 HTML 标签类型 , 该选择器 选择 匹配的父容器 中的 第一个 E 类型标签 子元素...结构伪类选择器 ul li:first-child { /* 结构伪类选择器 选择 ul 父容器下的 第一个 li 子元素...结构伪类选择器 ul li:first-child { /* 结构伪类选择器 选择 ul 父容器下的 第一个 li 子元素...结构伪类选择器 ul li:nth-child(1) { /* 结构伪类选择器 选择 ul 父容器下的 第 1 个 li...结构伪类选择器 ul li:nth-child(even) { /* 结构伪类选择器 选择 ul 父容器下的 偶数索引的
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
