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

2个伪选择器在CSS #id:after:active{}中分别不起作用

在CSS中,伪选择器是用来选择元素的特定状态或位置的选择器。在给定的问答内容中,我们需要解释为什么两个伪选择器在CSS #id:after:active{}中不起作用。

首先,让我们解释一下这个CSS选择器的含义。#id表示选择具有特定id属性的元素,after表示选择元素的伪元素after,active表示选择处于活动状态的元素。因此,#id:after:active{}选择具有特定id属性的元素的after伪元素,并且该元素处于活动状态。

然而,CSS中的伪选择器有一定的限制和规则。在给定的选择器中,两个伪选择器afteractive是无法同时应用于同一个元素的。这是因为伪元素只能应用于元素的某个特定部分,而活动状态只能应用于整个元素。

要解决这个问题,我们可以使用其他方法来实现相同的效果。例如,可以使用JavaScript来添加或移除类名来改变元素的样式,或者使用其他伪选择器来选择元素的不同状态。

总结起来,给定的CSS选择器#id:after:active{}中的两个伪选择器无法同时起作用,因为伪元素和活动状态只能应用于元素的不同部分。为了解决这个问题,可以使用其他方法来实现相同的效果。

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

相关·内容

148道 CSS 与 JavaScript 基础面试题

id选择器(#myid) 类选择器(.myclassname) 标签选择器(div,h1,p) 后代选择器(h1 p) 相邻后代选择器(子)选择器(ul>li) 兄弟选择器(li~a) 相邻兄弟选择器(...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引入的元素则不允许再支持旧的单冒号的写法。...a标签有四种状态 :链接访问前、链接访问后、鼠标滑过、激活 分别对应四种类 :link、:visited、:hover、:active; 当链接未访问过时: 当鼠标滑过 a 链接时,满足 :link

1.1K20

css选择器攻略

css3选择器分类 css3选择器最新的版本作为一个独立的模块分离了出来,而css选择器有哪些呢?又该如何分类,请看下图。 ?...选择器攻略 基本选择器 id,class,*通配符选择器,复合选择器选择器分组),无兼容问题 层次选择器 后代选择器:e f;子选择器 e>f ;相邻兄弟选择器 e+f,只能选择之后的一个;通用兄弟选择器...,e~f 之后的所有,卡可以选择多个;后面三个兼容ie7+ 目标选择器 e:target 针对连接到的部分,兼容ie9+ 动态类 :linked,:visited,:active,:hover...(n),:root,:only-child,:empty ,等,兼容ie9+ 否定类 :not() 针对性排除,兼容ie9+ 元素 元素新的规范为双冒号,为了区别类,ie6-8只识别单冒号...样式属性必须使用标签,以标签定义的CSS样式是不会被解析的。 由于安全原因,样式文件需以域的形式调用,像是file:是不起作用的。 此效果非动态的。

1.1K30
  • 常用的CSS3选择器

    目录 一、属性选择器 二、关系选择器 三、结构化选择器 四、元素选择器 五、链接CSS选择器的作用就是从HTML页面找出特定的某类元素。...三、结构化选择器 :root选择器 :root选择器用于匹配文档根元素,HTML,根元素始终是html元素。也就是说使用“:root选择器”定义的样式,对所有页面元素都生效。...:first-child和:last-child选择器 :first-child选择器和:last-child选择器分别用于为父元素的第一个或者最后一个子元素设置样式。...:target选择器 :target选择器用于为页面的某个target元素(该元素的id被当做页面的超链接来使用)指定样式。...:after选择器 :after元素选择器用于某个元素之后插入一些内容,使用方法与:before选择器相同。 五、链接类 1.链接CSS,通过链接类可以实现不同的链接状态。

    4.1K20

    前端面试题-CSS选择器

    一、CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素,但不只是 CSS ,JavaScript 对 CSS选择器也是支持的,比如 document.document.querySelectorAll...二、选择器类型 基本选择器 组合选择器 属性选择器 选择器 元素选择器 三、基本选择器 选择器 含义 作用 CSS .class 类选择器 匹配 class 包含(不是等于)特定类的元素 1 #id...id选择器 匹配特定 id 的元素 1 * 通用元素选择器 匹配页面任何元素(这也就决定了我们很少使用) 2 element 元素选择器 选择HTML元素 1 四、组合选择器 选择器 含义 作用 CSS...1 :active a:active 选择正在活动链接 1 :focus input:focus 选择元素输入后具有焦点 2 所有选择器在前端面试题-类和元素 七、元素选择器 选择器 作用...被插入的内容实际上不在文档树。 2 ::after/:after 选被元素后插入内容 其用法和特性与:before相似。

    70240

    CSS(CSS3)选择器(1)

    这篇文章主要用于存储CSS以及CSS3的选择器部分知识,以便日后查阅及记忆. 该内容分为两部分,第一部分为css选择器的一些基本知识。第二部分为CSS3新增加的选择器。...开始之前,先简单介绍一下选择器选择器的作用就是定位我们想要样式化的网页HTML元素。选择器可以分为以下几种类型。 1、简单选择器,通过元素类型,class或id匹配一个或多个元素。...#text { font-size: 16px; } /*一个ID名称文件必须是唯一的,若是ID名称重复,则可能会出现不可预知的情况,所以一定要避免ID名称的重复*/     3:.class,...class选择器,匹配所有class属性包含"class"的元素。...参考:css选择器笔记,30个你必须熟记的css选择器,MDN-docs-选择器介绍,HTML5和CSS3权威指南(第3版下册-庐陵牛)第十九章,before和after元素的用法。

    679100

    CSS3选择器介绍及用法总结

    选择器 a:visited 选择访问过链接 :active 选择器 a:active 选择活动链接 :hover 选择器 a:hover 选择鼠标悬浮链接 ::first-letter 首字母选择器...:first-child 首子级选择器 p:first-child 选择p元素是其父级的第一个子级的元素 ::before 元素选择器 p::before p元素之前插入内容 ::after 元素选择器...p::after p元素之后插入内容 :lang(language) 选择器 p:lang(it) 选择lang属性的起始值是it的p元素 ---- 这里需要注意的有div+p相邻兄弟元素选择器...“de”的属性值 说到这个属性选择器,我还要多说一点 我表格的示例是这么写的 a[src=\.pdf] 是因为“.”它不认识,我们需要加“\”转义 不过css属性选择器也可以写成引号的形式 比如说下面代码时等价的...a[src=\.pdf] a[src=".pdf"] a[src ##子元素选择器## 下面的一堆什么type、child的选择器都是针对子元素父元素的位置的 表格列出的很详细了 我主要谈谈

    1.5K20

    一篇文章带你了解CSS Pseudo-classes(类 )

    CSS选择器根据其他条件匹配组件,而不一定由文档树定义。CSS 类 是添加到选择器的关键字,指定要选择的元素的特殊状态。 一、什么是类?...CSS类允许设置元素的动态状态的样式,例如悬停,活动状态和焦点状态,以及文档树现有但不能通过使用其他选择器作为目标的元素,而无需添加任何选择器它们的ID或类。 例如,针对第一个或最后一个子元素。...注意: CSS :last-child选择器Internet Explorer 8和更早版本不起作用Internet Explorer 9及更高版本中支持。...提示: CSS :nth-child(N)选择器必须选择以特定间隔或模式(例如在偶数或奇数位置等)出现在文档树内的元素的情况下非常有用。...四、总结 本文基于CSS基础,介绍了CSS类,从什么是类,常见的类的用法( first-child,: last-seudo,: nth-child,: lang)最后介绍了类可以与CSS

    2K10

    CSS3选择器01—CSS2.1部分选择器

    这篇文章主要用于存储CSS以及CSS3的选择器部分知识,以便日后查阅及记忆. 该内容分为两部分,第一部分为css选择器的一些基本知识。第二部分为CSS3新增加的选择器。...开始之前,先简单介绍一下选择器选择器的作用就是定位我们想要样式化的网页HTML元素。选择器可以分为以下几种类型。 1、简单选择器,通过元素类型,class或id匹配一个或多个元素。...#text { font-size: 16px; } /*一个ID名称文件必须是唯一的,若是ID名称重复,则可能会出现不可预知的情况,所以一定要避免ID名称的重复*/     3:.class,...class选择器,匹配所有class属性包含”class”的元素。...参考:css选择器笔记,30个你必须熟记的css选择器,MDN-docs-选择器介绍,HTML5和CSS3权威指南(第3版下册-庐陵牛)第十九章,before和after元素的用法。

    29510

    深入解析 CSS 选择器

    CSS 定义时 :active 需设置 :hover 之后 */ a:active{ color: #fb743e; } <a target="_blank...注:<em>伪</em>类 <em>active</em> <em>在</em> IOS 系统下存在兼容问题,具体解决办法可参考 IOS <em>伪</em>类 <em>active</em> 兼容问题 (https://www.cnblogs.com/shemingxin/p/12660224...<em>伪</em>元素<em>选择器</em> div { margin-left: 50px;} /* ::<em>after</em> <em>在</em>选中元素的最后添加一个子元素,默认为行内元素 (替换元素上不生效) */...一个<em>选择器</em><em>中</em>只能使用一个<em>伪</em>元素 <em>CSS</em>3 <em>中</em><em>伪</em>元素应该用双冒号,以便区分<em>伪</em>元素和<em>伪</em>类。但是旧版的规范未做明确区分,所以大多数浏览器中支持部分<em>伪</em>元素使用单双冒号两种写法。...important; 正无穷 内联<em>选择器</em> 样式作用元素 1 0 0 0 <em>ID</em> <em>选择器</em> #<em>id</em> 1 0 0 类<em>选择器</em>、属性<em>选择器</em>、<em>伪</em>类<em>选择器</em> .class 1 0 标签<em>选择器</em>、<em>伪</em>元素<em>选择器</em> div 1 通用<em>选择器</em>

    72050

    css3 选择器

    ) 类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,换句话说需要保证类名html标记存在,这样才能选择类 <li class="<em>active</em> important...4、<em>id</em><em>选择器</em>(#<em>ID</em>) <em>ID</em><em>选择器</em>和类<em>选择器</em>相似,<em>在</em>使用<em>ID</em><em>选择器</em>之前也需要先在html文档中加注<em>ID</em>名称,这样<em>在</em>样式<em>选择器</em><em>中</em>才能找到相对应的元素,不同的是<em>ID</em><em>选择器</em>是一个页面<em>中</em>唯一的值,我们<em>在</em>类使用时是<em>在</em>相对应的类名前加上一个...<em>伪</em>类<em>选择器</em>参考传送门:http://www.w3cplus.com/<em>css</em>3/pseudo-class-selector 1、动态<em>伪</em>类 动态<em>伪</em>类,因为这些<em>伪</em>类并不存在于HTML<em>中</em>,而只有当用户和网站交互的时候才能体现出来...,动态<em>伪</em>类包含两种,第一种是我们<em>在</em>链接中常看到的锚点<em>伪</em>类,如":link",":visited";另外一种被称作用户行为类,如“:hover”,":active"和":focus"。...IE6-8浏览器不支持:not()选择器 5、元素 CSS元素大家以前看过::first-line,:first-letter,:before,:after;那么CSS3,他对元素进行了一定的调整

    53310

    HTML学习笔记——css基础

    目录 前言 一、使用css修改元素的样式 1、内联样式、行内样式:  2、内部样式表: 3、外部样式表:(最佳) 二、CSS基本语法 三、CSS的各类选择器 1、 元素选择器:  2、 id选择器...网页实际上是一个多层的结构,通过css可以分别为网页的每一个层来设置样式,而最终我们能看到的只是网页的最上边一层。... 二、CSS基本语法 CSS的基本语法为:选择器  声明块 选择器:可以选中页面的指定元素。...三、CSS的各类选择器 1、 元素选择器: 作用:根据标签名来选中指定的元素。 语法:  标签名{}  2、 id选择器: 作用:根据元素的id属性值选中一个元素,不能重复。...:hover 表示鼠标移入的状态         :active  表示鼠标点击         元素:表示页面中一些特殊的并不真实存在的元素(特殊的位置),使用 :: 开头

    71720

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

    CSS 选择器家族,新增这样一类比较新的选择器 -- 逻辑选择器,目前共有 4 名成员: :is :where :not :has 本文将带领大家了解、深入它们。...做到学以致用,写出更现代化的选择器。 :is 选择器 :is() CSS类函数将选择器列表作为参数,并选择该列表任意一个选择器可以选择的元素。...但是,如果,我们 :is() 选择器,加上一个 #test-id,情况就不一样了。... W3 CSS selectors-4 规范 ,新增了一个非常有意思的 :focus-visible 类。...最后到所有逻辑选择器里面最重磅的 :has 出场了。它之所以重要是因为它的诞生,填补了之前 CSS 选择器,没有核心意义上真正的父选择器的空缺。

    1.5K50

    如何提升CSS技术?8个硬核技巧带你迅速提升CSS技术

    基础选择器 选择器 别名 说明 版本 常用 tag 标签选择器 指定类型的标签 1 √ #id ID选择器 指定身份的标签 1 √ .class 类选择器 指定类名的标签 1 √ * 通配选择器 所有类型的标签...元素HTML代码里未声明却能正常显示,页面渲染时看到这些本来不存在的元素发挥着重要作用。:before和:after是两个很重要的元素,早在CSS2就出现了。 起初元素的前缀使用单冒号语法。...随着CSS改革,元素的前缀被修改成双冒号语法,:before/:after从此变成::before/::after,用来区分类,未提及的元素同理。...另外声明::after的margin-bottom稍微比::before高一点,这样旋转过程能让波浪产生动态的立体效果。...提升过程,两个遮罩层位移距离应该是一致的,所以可用变量计算公式表示且::after比::before高10px。

    2.2K40

    8个硬核技巧带你迅速提升CSS技术

    基础选择器 选择器 别名 说明 版本 常用 tag 标签选择器 指定类型的标签 1 √ #id ID选择器 指定身份的标签 1 √ .class 类选择器 指定类名的标签 1 √ * 通配选择器 所有类型的标签...元素HTML代码里未声明却能正常显示,页面渲染时看到这些本来不存在的元素发挥着重要作用。:before和:after是两个很重要的元素,早在CSS2就出现了。...起初元素的前缀使用「单冒号语法」。随着CSS改革,元素的前缀被修改成「双冒号语法」,:before/:after从此变成::before/::after,用来区分类,未提及的元素同理。...另外声明::after的margin-bottom稍微比::before高一点,这样旋转过程能让波浪产生动态的立体效果。...提升过程,两个遮罩层位移距离应该是一致的,所以可用变量计算公式表示且::after比::before高10px。

    2.8K30

    HTMLCSS 常见面试题汇总

    val”]、E[att$=“val”]、E[att*=“val”]、E[att|=“val”] 选择器:E:link、E:visited、E:hover、E:active、E:focus、E:lang...:first-line、E:before/E::before、E:after/E::after、E::selection 7、CSS类与CSS对象的区别 CSS引入类和元素的概念是为了描述一些现有...CSS无法描述的东西,根本区别在于:它们是否创造了新的抽象元素; 类:描述了所有逻辑上存在但在文档树无须标识的分类; 对象:代表了某个元素的子元素,这个子元素虽然逻辑上存在,但却并不实际存在于文档树...; 8、请简述CSS的权重规则 行内样式 > ID > 属性选择器/class类/选择器 > 元素名/对象选择器; 关系选择器将拆分为两个选择器再计算权重。...css的content属性专门应用在 after/before 元素上,用于插入生成内容,可以配合自定义字体显示特殊符号。

    1.6K20

    CSS选择器知识点整理

    id属性的值,在当前的page页面要是唯一的。 class:指定标签的类名。CSS操作,把一些特定样式放到一个class类,需要此样式的标签,可以添加此类。 2、CSS选择器常见的有几种?...| | E::after | E元素之后插入生成的内容 | 3、选择器的优先级是怎样的?...从高到低分别是: 1、属性后面使用 !...important 会覆盖页面内任何位置定义的元素样式 2、作为style属性写在元素标签上的内联样式 3、id选择器 4、类选择器、 5、选择器 6、属性选择器 7、标签选择器 8、...active 这三种选择器来定义样式,因为后面的样式会覆盖前面的样式,所以a:hover应放在a:link的后面,a:active放在最后。

    1.1K50

    前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)

    目录 CSS(Cascading Style Sheet) CSS注释 CSS语法结构 CSS的三种引入方式 选择器 类、元素选择器速查 CSS选择器优先级***** 选择器相同的情况下 选择器不同的情况下...red; } CSS的三种引入方式 文件导入式(项目规范推荐使用) head标签的style标签里书写 嵌入式/行内式(标签上直接写,最不推荐使用) 1.文件导入式(最规范的形式) <link rel...### 选择器 ########## */ 选择器(可以再了解一下) :link 未访问时 :hover 鼠标覆盖/悬浮 :active 鼠标按下 :visited 访问后 :focus.../*css加上去的,页面上无法选中*/ color: red; } p:after{ /*可以用来解决浮动问题*/ content: '&'; /*末尾添加内容*/ color...: red; } 类、元素选择器速查 由于id选择器、类选择器等普通选择器比较熟悉,所以就整理一个类、元素选择器方便后期快速查阅 先放一个别人整理好的吧,后期再自己整理一下:CSS选择器完整参考手册

    50740

    59道CSS面试题(附答案)

    1、CSS有哪些基本选择器?它们的权重是如何表示的? CSS基本选择器有类选择器、属性选择器ID选择器。...注意:CSS3规范,为了区别元素和类,CSS3建议类用单冒号“:",元素用双冒号"::"。 7、CSS的哪些样式可以继承?哪些不可以继承?...(7)我们知道ID选择器的速度最快,但是如果都用ID选择器,会降低代码的可读性和可维护性等。大型项目中,相对于使用ID选择器提升速度,代码的可读性和可维护性带来的收益更大。...35、CSS的 content属性有什么作用?有什么应用? CSS的 content属性专门应用在 before/after元素上,用于插入生成的内容最常见的应用是利用类清除浮动。...因为访问过的超链接样式覆盖了原有的 hover和 active选择器样式,解决方法是将CSS属性的排列顺序改为L→V→H→A(link, visited, hover, active)。

    5K50

    CSS3入门

    "> 内嵌式 将CSS代码内嵌HTML文档的 style标签 格式:选择器{属性:值;属性:值;...}...外链式 使用 link 标签外链另一个CSS文件 三种方式对比 基础选择器 选择器的作用:从HTML文档中找到要设置样式的标签 基础选择器:标签选择器id选择器、类选择器 标签选择器: 优点:一次性选择所有页面的标签...举头望明月, 类选择器 使用标签class属性的值将页面的标签选出来 任何标签都有class属性,不同标签的class值可以是相同的 重点:style标签中使用类选择器时必须在前面加上.../* 鼠标悬浮在链接上 */ a:active /* 选定的链接 */ 注意事项: 链接类:必须按顺序来写 实际项目中,只设置 a 标签基本样式 和 hover 类样式 选择器权重 块元素和行内元素...元素法 after元素法是额外标签法的升级版(推荐) 核心原理:利用CSS3的新特性自动创建一个叫做after元素,再使用clear:both进行浮动清除 双元素法 双元素是after元素的升级方法

    1.6K10
    领券