层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。...使用伪元素 使用伪元素是相对容易的，:before将会在内容之前“添加”一个元素而:after将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用content属性。...，事实上伪元素表现上就像是“真正”的元素，我们能够给它们添加任何样式，比如改变它们的颜色、添加背景色、调整字体大小、调整它们中的文本等等。...否则，伪元素无论如何都无法正常工作。...叠加图像效果 使用伪元素来仅仅依靠一个图片标签创建一个“凌乱的”叠加图像效果也是可能的。伪元素用于建立一个图片叠加的错觉，通过使用z-index负值使“叠加”的图片在真正的图片后面来实现。 ?
问题: 会在元素末尾，增加一个额外的标签(空div或br)，我们前端设计人员看到这个额外标签的时候会发现 无内容，默认可能会删除。导致出现塌陷。这个是W3C推荐，但是我们不推荐用。 只显示部分字体内容 */ /* overflow: hidden; */ /* 滚动模式:横 纵滚动条，现在只有纵向可以动； */...-- 设置或检索是否显示对象。...：将第一种方式，结合伪类来做了操作； 父级元素，下面有个伪类,after；表示父级元素的后面 这种方式用的比较多，可以多加练习。... 3.4 父级添加双伪元素法 .clearFix::after, .clearFix::before { content
并集选择器 并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。...或者说，它能选择任何包含在内 的标签 子元素选择器 子元素选择器只能选择作为某元素子元素的元素。...div::befor { content:"开始"; } div::after { content:"结束"; } E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类...，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。...E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解 ":" 与 "::" 区别在于区分伪类和伪元素
) [I] 伪元素 伪元素是对元素中的特定内容进行操作，选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。...它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素 ::before 在元素内容之前插入额外生成的内容 ::after 在元素内容之后插入额外生成的内容 ::...[1.1] ::before 和 ::after 相比于其他伪元素大都是对文档中已有部分的选择，::before 和 ::after 则是向文档树中加入内容，这些内容并不存在于HTML源代码中，但确是可见的...visibility:hidden或者display:none隐藏::first-letter伪元素，是不会生效的 开头的子元素支持部分display属性值标签嵌套 如果是inline, block,...如果元素中有空格等内容，不会被认为是:empty [2.4] 根据索引选择特殊类型的元素 这一系列的伪类包括 :first-of-type,:last-of-type,:only-of-type,:nth-of-type
一、伪元素概念 其实从字面意思上理解即可，伪字吗，就是假的意思。伪元素其实就是一个真的存在但又是假的元素，它存在内容，但是它本身并不存在于文档树当中，也没有任何html标签。...二、我们为什么要使用伪元素？ H5之后，增加了很多语义化的元素进来，如nav、hader、footer这种语义化标签，让文档树更为清晰的，也能让样式和内容更好的分离。...简而言之：伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。 应用场景 简单说几个最常见的例子吧。...; } 3.2、::after ::after在元素内部的后面插入内容。 CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。...另外新创建的元素在文档树中是找不到的 before 和 after 必须有content 属性 before 在父元素内容前面创建元素，after 在元素内容的后面插入元素 伪元素选择器和标签选择器一样
前端er们大都或多或少地接触过CSS伪类和伪元素，比如最常见的:focus,:hover以及标签的:link、visited等，伪元素较常见的比如:before、:after等。...伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。 任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。...并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。 伪元素的由两个冒号::开头，然后是伪元素的名称。...简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。...::after{ content: " (Unrecognized language) "; } 以上代码通过伪类"lang获取不同lang属性的节点，并为之设置伪元素::after，伪元素的内容是此节点的语言类型
前端工作者肯定或多或少地接触过CSS伪类和伪元素，比如最常见的:focus,:hover以及标签的:link、visited等，伪元素较常见的比如:before、:after等。...任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。...并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。 伪元素的由两个冒号::开头，然后是伪元素的名称。...简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。...:after，伪元素的内容是此节点的语言类型。
h2 ~ a {color: red;} 标签a 和 标签h2 同一级，且a标签在h2 标签之后。（只应用与a标签） 通用选择符 * 通用选择符 * 是一个通配符，它匹配任何元素。...p:hover {background-color: gray;} :focus 伪类 可以应用于任何元素。 点击时会或得焦点。 :target 伪类 可以应用于任何元素。...e::first-line ::before和::after 使用规则如下： e::before e::after 可用于在特定的元素前面或者后面添加特殊内容。...比如，如果作者链接样式表将p的字体设定为Helvetica，而页面中有一条嵌入规则以相同的选择符吧字体设定为Verdana，那么段落文本最终会以Verdana字体显示。...ICE记分规则如下： 选择符中有一个ID，在I的位置上加1； 选择符中有一个类，在C的位置上加1； 选择符中有一个元素，在E的位置上加1； 得到一个三位数。
相反，您可以在另一个元素中完全复制该元素的外观，内容和位置，再复制的元素隐藏起来。 现在，这三个元素都是相互联系的。无论哪一个子元素最高，都会把父元素推到那个高度，而另一个子元素也会跟随。...这是最奇怪的部分 在我的演示中，我将 ::after 用于复制的文本。我不确定这是否是最好的方法。...对我来说感觉很干净，但是我想知道使用 对于屏幕阅读器是否更安全？ 或 visibility: hidden; 够了吗？无论如何，那不是奇怪的部分。...这是奇怪的部分： content: attr(data-replicated-value) " ";复制代码 因为我使用的是伪元素，伪元素是将 data 属性从元素中取出并以额外的空间将内容呈现到页面的行...如果你不这样做，最终的结果会让人感觉 "跳脱"。我不能说我完全理解它，但它似乎更好地尊重了跨textarea和文本元素的换行行为。 如果你不想使用伪元素，嘿嘿，我没意见，只要注意跳动的行为即可。
用语言来描述就是：父元素设置position:relative，其伪元素（after或者before）设置 position:absolute，并且让top,bottom,left,right都为0，伪元素占满父元素的整个空间...这里如果不设置z-index值为负值的话，就看不到在 li 元素里面的文字了，因为absolute会提高自身元素的层级，所以要让伪元素z-index为-1，让其的层级位居 li 元素之后。...如果是li::after:hover 这样设置的话是没有任何效果的。正确的写法：li:hover::after。 示例效果如下。 ? ?...其中，在伪元素上设置perspective()和rotateX()，只会对伪元素进行3D处理和在空间中X轴的旋转，并不会对父元素上的文字进行任何的处理。文字还是会按照默认效果显示。...如果在伪元素中给background设置inherit的话，只会继承父容器rascal的背景，而rascal容器是一个白色背景的容器，这样就与我们的效果不相同了。
:: 双冒号开头的 实际上是支持使用单冒号的，但是我们提倡双冒号这个写法 因为我们可以一眼就看出这个是伪元素选择器，和伪类区分开来 伪元素属于选中一些原本不存在的元素 如果我们不选择它们，这个地方就不存在这个元素了...标签，其实任何可以获得焦点的元素都可以使用 :target —— 链接到当前的目标，这个不是给超链接用的，是给锚点的 a 标签使用的，就是当前的 HASH指向了当前的 a 标签的话就会激活 target...CSS 伪元素 一共分为 4 种 ::before ::after ::first-line ::first-letter ::before 和 ::after 是在元素的内容的前和后，插入一个伪元素。...before 和 after 在我们概念里，我们可以认为带有 before 伪元素的选择器，会给他实际选中的元素的内容前面增加了一个元素，我们只需要通过他的 content 属性为它添加文本内容即可。...（这里我们也可以给伪元素赋予 content: '' 为空的）所以我们可以任何的给 before 和 after 指定 display 属性，和不同元素一样比较自由的。
如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏。如果你对我的内容感兴趣，记得关注我以便不错过每一篇精彩。 当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正️️。...该选择器权重为10. 4.伪元素选择器 常见的伪元素选择器有::before，::after 。 伪元素选择器生成的元素默认情况下是行内元素。...这意味着使用伪元素（如::before和::after）时，默认情况下内容会像普通文本一样在行内排列。...新创建的这个元素在文档树中是找不到的，所以我们称为伪元素 伪元素 ::before 和 ::after 必须具有 content 属性，否则不会生成任何内容。...即使你为伪元素应用了其他样式（如颜色、背景等），如果没有定义 content 属性，伪元素将不会在页面上显示。 content属性用于插入文本内容。
伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。...究其原因，要想要标签支持伪元素，需要这个元素是要可以插入内容的，也就是说这个元素要是一个容器。而 input，img，iframe 等元素都不能包含其他元素，所以不能通过伪元素插入内容。...纯CSS实现title属性hover效果 我们都知道，在 HTML 标签中有这样一个属性 – title，该属性规定关于元素的额外信息，就是我们可以往 title 里面填入一段文字，鼠标移到元素上时就会显示这段文本...主要是运用了伪元素的 content 属性， content 通常是用于在伪元素中插入内容的。...，使用伪元素，可以完美实现： 通过给伪元素 :after 设置 inline-block ，配合容器的 text-align: justify 就可以轻松实现多列均匀布局了。
以下案例能配动图的我尽量去配了，以免内容枯草乏味，但是如果内容有误，也请大家亲喷或者纠正?...，返回第一个li 注意：无论如何只返回一个元素，如果有多个素，那也只返第一个✅ - querySelectorAll 获取指定元素中匹配css选择器的所有元素： let list = document.querySelectorAll...： 我是P元素，但是我也可以被编辑 效果如下： 如果这个属性跟style标签相遇会产生一段非常奇妙的故事：contenteditable跟style标签可真是天生一对...- speelcheck 也是一个html属性，规定输入的内容是否检查英文拼写： 只显示指定的元素，元素的宽高填充了整个屏幕✅ 关闭全屏的时候需要注意的是，统一用document对象： /** * @method exitFullScreen 关闭全屏
2.2.6、空值：没有任何的内容，连空格都没有 li:empty{ background-color: red; } 2.2.7、锚链接伪类 E:target ：可以为锚点目标元素添加样式，当目标元素被触发为当前锚链接的目标时...E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，因为在新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理...E::before：定义在一个元素的内容之前插入 content 属性定义的内容与样式。 E::after：定义在一个元素的内容之后插入 content 属性定义的内容与样式。...注意： IE6、IE7与IE8（怪异模式Quirks mode）不支持此伪元素 CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念，CSS3中 提出伪元素的概念 E:...:before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者 E:after伪类 示例： <!
:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下： #example:before { content...'#'，以及在内容之后添加一个'$'，插入的行内元素是作为#example的子元素，效果如下: #Here is the example content$ 需要注意的是如果没有content属性，伪类元素将没有任何作用...需要注意的是如果没有content属性，伪类元素将没有任何作用。...()函数会返回指定元素对应属性的值 :before和:after的一些惊人用法 >. clearfix hack 如果父元素容器里面的子元素是浮动元素的话，我们一般需要在父元素闭合前添加一个clear:...both的元素用于清除浮动从而能使父容器正常被子元素内容撑起，但是这种方法引入了多余的无意义标签，并且有javascript操作子元素的时候容易引发bug。
我遇到过一些人，他们根本不认为CSS与国际化有关，但如果你仔细想想，国际化不仅仅是把你网站上的内容翻译成多种语言，然后就收工了。...有关如何构造语言标签的详细说明，请参考HTML和XML中的语言标签。 一般指导原则是 html 元素必须始终具有 lang 属性集，然后该属性将被所有其他元素继承。...:lang() 伪类选择器 结果发现 :lang() 伪类选择器并不那么出名。但是，此伪类选择器非常酷，因为即使在元素外部声明了语言，它也可以识别内容的语言。...伪类仍然可以使用，如果我们使用更常见的属性选择器，例如 [lang="zh]，那么这个属性必须在 元素上才能生效。 使用属性选择器 这就引出了我们的下一个技术，使用属性选择器。...是的，你可以使用普通的类或id，虽然你将不再利用已经在你的元素上的便利。但是，可以肯定的是，如果确实愿意，为你的元素提供用于应用特定语言相关样式的类名，没有人会阻止你。
::before 和 :after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 相关知识点： 单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。...不过浏览器需要同时支持旧的已经存在的伪元素写法，比如 :first-line、:first-letter、:before、:after 等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。...想让插入的内容出现在其它内容前，使用 ::before，否者，使用 ::after ； 在代码顺序上，::after 生成的内容也比 ::before 生成的内容靠后。...如果按堆栈视角，::after 生成的内容会在 ::before 生成的内容之上。 4. 伪类与伪元素的区别 css 引入伪类和伪元素概念是为了格式化文档树以外的信息。...CSS3 新增伪类有那些？ elem:nth-child(n) 选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数值，也可以接受函数。
举头望明月， 类选择器 使用标签中class属性的值将页面中的标签选出来 任何标签都有class属性，不同标签的class值可以是相同的 重点:在style标签中使用类选择器时必须在前面加上.../* 选定的链接 */ 注意事项： 链接伪类：必须按顺序来写 实际项目中，只设置 a 标签基本样式 和 hover 伪类样式 选择器权重 块元素和行内元素 HTML标签主要分为块标签和行内标签两种类型...浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐 float:inherit;该属性为继承父元素的浮动属性 列表浮动 清除浮动 额外标签法 添加一个新标签，...sroll; after 伪元素法 after伪元素法是额外标签法的升级版（推荐) 核心原理:利用CSS3的新特性自动创建一个叫做after的伪元素，再使用clear:both进行浮动清除 双伪元素法...双伪元素是after伪元素的升级方法 核心原理:利用CSS3的新特性自动创建before和after两个伪元素，再使用clear:both进行浮动清处 清除浮动细节 推荐用法 after伪元素法(京东
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
