首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

:选中不能在带有伪元素的css中工作

伪元素是CSS中的一种特殊选择器,用于在元素的特定位置插入内容。常见的伪元素有::before和::after,它们可以在元素的前面或后面插入内容。

然而,伪元素在某些情况下可能无法正常工作。具体来说,在带有伪元素的CSS中,如果选择器的目标元素不存在或不可见,伪元素将无法生效。这可能是由于选择器的目标元素在DOM中不存在,或者被设置为display: none或visibility: hidden。

此外,伪元素也无法应用于一些特殊的元素,如input、img等。这是因为这些元素通常没有内容,无法在其前后插入其他内容。

对于这种情况,可以考虑使用其他CSS技术来实现相同的效果,例如使用背景图像、额外的HTML元素或JavaScript来动态插入内容。

总结起来,带有伪元素的CSS在某些情况下可能无法正常工作,需要注意选择器的目标元素是否存在、可见,并且避免在不支持伪元素的元素上使用伪元素。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS类和元素

定义 CSS 类 是添加到选择器关键字,指定要选择元素特殊状态。 例如,:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮颜色。...元素 元素是一个附加至选择器末关键词,允许你对被选择元素特定部分修改样式。 下例 ::first-line 元素可改变段落首行文字样式。 /* 每一个 元素第一行。... .first { font-size: 5em; } 如果创建一个元素,我们可以通过设置:first-letter元素来为其添加样式。... p:first-letter { font-size: 5em; } 从上述例子可以看出,操作对象是文档树已有的元素,而元素则创建了一个文档数外元素。...总结 1.类本质上是为了弥补常规CSS选择器不足,以便获取到更多信息; 2.元素本质上是创建了一个有内容虚拟容器; 3.CSS3类和元素语法不同; 4.可以同时使用多个类,而只能同时使用一个元素

2.8K10
  • css面试点三:清除浮动方法-高度塌陷理解-元素使用

    浮动定义 使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻浮动元素停了下来。 浮动框可以左右移动,直到遇到另一个浮动框或者遇到它外边缘包含框。...浮动框不属于文档流普通流,当元素浮动之后,不会影响块级元素布局,只会影响内联元素布局 当包含框高度小于浮动框时候,此时就会出现“高度塌陷”。 为什么要清除浮动?...清除浮动主要是为了解决,父元素因为子级元素浮动引起内部高度为0问题。 当父元素不给高度时候,内部元素不浮动时会撑开,而浮动时候,父元素变成一条线。...缺点:只适合高度固定布局,要给出精确高度,如果高度和父级div不一样时,会产生问题 建议:推荐使用,只建议高度固定布局时使用 <div class...建议:推荐使用,如果你需要出现滚动条或者确保你代码不会出现滚动条就使用吧。

    94620

    CSS基础-引入方法,选择器,继承

    3、导入式      即:将一个外部CSS文件引入CSS文件或HTML文件,注意此方法既能在CSS文件里使用也能够在HTML标签之间使用。    ...">  选中title属性以a1结束元素            a[title*='a1']    选中    选中title属性包含a1元素            ...不是span兄弟-->                  六、CSS继承特性      子元素会继承父元素样式      CSS:    p{ color:red; text-decoration...:visited 向已被访问链接添加样式。 :first-child 向元素第一个子元素添加样式。 :lang 向带有指定 lang 属性元素添加样式。...八、元素 :first-letter 向文本第一个字母添加特殊样式。 :first-line 向文本首行添加特殊样式。 此类只能用于块级元素。 :before 在元素之前添加内容。

    68210

    前端学习(15)~css3学习(九):选择器详解

    【重要】 比如说,同样是一个头像,可能在低版本浏览器,头像方;在高版本浏览器,头像是圆。 (2)考虑用户群体。 (3)遵照产品方案。...div~p: 选中div后面所有的p CSS3新增了许多灵活查找元素方法,极大提高了查找元素效率和精准度。...E[title="abc"]选中页面的E元素,并且E需要带有title属性,且属性值完全等于abc。...CSS3又新增了其它类选择器。这一小段,我们来学习CSS3结构类选择器:即通过结构来进行筛选。 1、格式:(第一部分) E:first-child 匹配父元素第一个子元素E。...这个要好好理解,具体可以看CSS参考手册E:nth-child(n)示例。我们可以理解成:先根据选择器找到选中全部位置,如果发现某个位置不是类型E,则该位置失效。

    50020

    【Hello CSS】第五章-CSS选择器与函数

    其实也是可以,只是建议这么做,至于为什么,后面的文章会进行讲解); 4.通用选择器:写个 *,啥HTML标签都选中了。...在例子中选中就是 .a里面的所有带有 .b节点; >:子代选择器,例如:.a>.b。在例子中选中就是 .a里面的所有带有 .b子节点; ~:后继选择器,例如:.a~.b。...在例子中选中就是由 .a表示网格/表单元格 .b,属于 SelectorsLevel4内容。 类与元素 1.类:类是添加到选择器关键字,指定要选择元素特殊状态。...// 语法 selector:pseudo-class { property: value; } 2.元素元素是一个附加至选择器末关键词,允许你对被选择元素特定部分修改样式...一个选择器只能使用一个元素。 // 语法 // 以前单冒号也行,现在浏览器也兼容。

    44310

    深入解析 CSS 选择器

    一、前言 CSS 选择器对 HTML 页面元素实现一对一,一对多或者多对一控制,从而给指定元素添加样式。同时还要考虑一个元素被赋予多个样式时如何生效问题,这个就和选择器优先级相关了。...结构类 /* 父元素第一个子元素且该子元素为 p 元素 */ p:first-child { background: #046582; } /* 父元素第一个...元素选择器 div { margin-left: 50px;} /* ::after 在选中元素最后添加一个子元素,默认为行内元素 (替换元素生效) */...一个选择器只能使用一个元素 CSS3 元素应该用双冒号,以便区分元素类。但是旧版规范未做明确区分,所以大多数浏览器中支持部分元素使用单双冒号两种写法。...important 是 CSS 选择器一个"流氓"属性,不论选择器权重或者优先级高低,只要加上 !important,那么这个样式优先级就是最高 如果针对同一元素样式存在冲突且同时存在 !

    70850

    重新认识类和元素

    类与元素 先说一说为什么css要引入元素类,以下是css2.1 Selectors章节类与元素描述: CSS introduces the concepts of pseudo-elements...直译过来就是:css引入类和元素概念是为了格式化文档树以外信息。也就是说,类和元素是用来修饰不在文档树部分,比如,一句话第一个字母,或者是列表第一个元素。...:checked 被选中input元素 :empty 匹配没有子元素元素 :valid 匹配条件验证正确表单元素元素 元素前面是两个冒号,E::first-line 元素。...这个元素只能用在块元素,不能用在内联元素。 ::selection 匹配用户被用户选中或者处于高亮状态部分。在火狐浏览器使用时需要添加-moz前缀。该元素只支持双冒号形式。...::placeholder 匹配占位符文本,只有元素设置了placeholder属性时,该元素才能生效。 该元素不是CSS标准,它实现可能在将来会有所改变,所以要决定使用时必须谨慎。

    99120

    全栈之前端 | 2.CSS3基础知识之选择器学习

    CSS 属性选择器语法: [attribute] : 用于选取带有指定属性元素。...它选中了文档所有内容(或者是父元素所有内容,比如,它紧随在其他元素以及邻代运算符之后时候)。...>List item 2 /**有效果**/ List item 3 通用兄弟选择器描述: 如果你想选中一个元素兄弟元素,即使它们直接相邻...要选中所有的元素后任何地方元素,我们会这样做 p ~ img. 示例.我们选中了所有的 之后元素,虽然文档还有个 ,其后还是被选中了。...不过,建立一长列选中文档很明确部分选择器时候,小心一些。这些 CSS 规则难以复用,因为你让选择器在表示标记文本元素相对位置上过于明确。

    21810

    CSS 选择器 — 重学前端

    在之前 《实战中学习浏览器工作原理》我们已经对选择器有了一些全新视角认知。这里我们站在 CSS 角度一起学习选择器。 ? 选择器语法 我们先了解一下选择器语法,然后深入了解背后相关特性。...元素选择器 —— ::before 一般来说是以 :: 双冒号开头 实际上是支持使用单冒号,但是我们提倡双冒号这个写法 因为我们可以一眼就看出这个是元素选择器,和类区分开来 元素属于选中一些原本不存在元素...选择器优先级 在之前 《实战中学习浏览器工作原理》也接触过选择器优先级概念了。这里我们深入了解一下选择器优先级概念。...CSS 类其实是一类非常多内容简单选择器。...before 和 after 在我们概念里,我们可以认为带有 before 元素选择器,会给他实际选中元素内容前面增加了一个元素,我们只需要通过他 content 属性为它添加文本内容即可。

    84741

    CSS】776- 16个非常有用CSS选择器

    )选择器可以为文档不一定具体存在结构指定样式,或者为某些元素、文档标记模式、甚至是文档本身状态所指示幻像类指定样式。...熟悉所有的 CSS 是实现这个目标的一种方法 —— 另一种是实施最佳实践和尽可能减少代码。 1、::first-line | 选择首行文本 这个元素选择器选择换行之前文本首行。...div::selection { background: yellow;} 4、:root | 根元素 :root 选中文档元素。在 HTML ,为 HTML 元素。...在 RSS ,则为 RSS 元素. 这个类选择器应用于根元素,多用于存储全局 CSS 自定义属性。 5、:empty | 仅当元素为空时触发 这个类选择器将选中没有任何子项元素。...a:link { color: orangered; }Login 这将选中未被点击过带有 href 指定界面的 a 锚点元素选中元素文字将会显示为橙色

    75830

    简单聊一聊如何使用CSS父类Has选择器

    最近:has()选择器允许您对父元素和其他祖先应用样式,本文将向您展示如何在Web应用程序开发中使用它。 在CSS世界,选择器是驱动我们在网页上看到美丽且响应式设计工作马。...它们允许开发者根据元素属性、位置和关系来选择和样式化HTML元素。 一个较新CSS选择器/类被称为 :has ,它允许您选择每个具有与您提供给 :has() 函数选择器匹配元素元素。...何时使用:has选择器 :has() 选择器是一种CSS类,允许您选择包含特定子元素元素。...当我们悬停在位置和员工上时,您会注意到根本没有任何下拉菜单指示。如果我们为此使用修饰类,我们将不得不手动进入HTML文件并编写代码。然而,我们可以通过 :has 类来实现这一点。...既然我们已经到了教程结尾,希望你对 CSS 选择器/类有所了解。 结论 CSS :has 选择器提供了一种创新方法来解决网页开发复杂样式挑战。

    82040

    CSS复合选择器

    白话: 这里子 指的是 亲儿子 包含孙子 重孙子之类。 比如: .demo > h3 {color: red;}   说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。...属性选择器 选取标签带有某些特殊属性选择器 我们称为属性选择器         /* 选择input带有value属性 */         input[value] {             ...color: pink;         }         /* 选择input带有type属性且值为password */         input[type="password"] {             ...(CSS3) E::first-letter文本第一个单词或字(如中文、日文、韩文等) E::first-line 文本第一行; E::selection 可改变选中文本样式; p...div::befor {  content:"开始"; } div::after {  content:"结束"; } E:after、E:before 在旧版本里是元素CSS3规范里“:”用来表示

    45540

    这些 CSS 类,你可能还不知道,可以用起来了!

    ::first-line 元素能在块容器,所以,::first-line元素能在一个display值为block, inline-block, table-cell 或者 table-caption...用法如下: p:first-line { color: lightcoral; } ::first-letter | 选择这一行第一字 CSS 元素 ::first-letter会选中某块级元素第一行第一个字母...:last-of-type | 选择指定类型最后一个子元素 :last-of-type CSS 类 表示了在(它父元素)子元素列表,最后一个给定类型元素。...:checked | 选择一个选中复选框 :checked CSS 类选择器表示任何处于选中状态radio(), checkbox (<input type...Div 1 和 Div 2会被选中,p 不会被选 。 ---- 原文:https://blog.bitsrc.io/css-ps...

    1K20

    浅谈逻辑选择器 -- 父选择器它来了!

    做到学以致用,写出更现代化选择器。 :is 类选择器 :is() CSS类函数将选择器列表作为参数,并选择该列表任意一个选择器可以选择元素。...由于它作用是防止特定元素选中,它也被称为反选类(negation pseudo-class)。...在 W3 CSS selectors-4 规范 ,新增了一个非常有意思 :focus-visible 类。...有了这个类,就可以做到,当用户使用鼠标操作可聚焦元素时,展示 :focus 样式或者让其表现较弱,而当用户使用键盘操作焦点时,利用 :focus-visible,让可获焦元素获得一个较强表现样式。...注意,这里选择不是 :has() 内包裹选择器选中元素,而是使用 :has() 宿主元素

    1.5K50

    Sass速通(二):嵌套与作用域

    嵌套 选择器嵌套 在 Sass ,可以在父选择器写子选择器,以嵌套形式来表达关联关系,这样做可以减少我们重复书写父选择器工作量。...、div:first-child 元素选择器,如 p::before、p::after 其中,类和元素选择器需要与别的选择器复合使用,以确定是哪些元素类或元素。...变量作用域 在 Sass ,变量只能在它被声明层级和子层级访问;如果一个变量在不同层级中被重复定义,在使用时会从下到上寻找最近定义。这与 JS 函数作用域相似。...: 以前使用原生 CSS 做响应式布局时,我们需要先写好不同媒体查询区块,整理出元素在不同设备特殊样式,然后写入对应区块。...一个元素样式分散在不同媒体查询,维护起来比较麻烦。 在 Sass ,我们可以在写完一个元素公共样式之后,直接在下面嵌套媒体查询,所有的响应代码和这个元素都写在同一块地方,维护起来非常方便。

    1.5K20

    css 总结1 原

    4、所有的 XHTML 元素必须被嵌套于 根元素 三、css选择器 1、CSS 元素选择器 html {color:black;} h1 {color:blue;} h2 {color...(选中p) 9、类选择器  (1)超链接 a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF...input:disabled      选择每个禁用 元素 input:checked      选择每个被选中 元素。...{font-weight: bold;} (4) first-of-type css选择器:first-child与:first-of-type区别 p:first-child 匹配p元素元素第一个子元素...元素为DOM树没有定义虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择元素指定内容。 在CSS3类与元素在语法上也有所区别,元素修改为以::开头。

    66330
    领券