：选中不能在带有伪元素的css中工作 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

css中的伪类与伪元素

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。...伪类的种类伪元素的种类区别这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。...p>i:first-child {color: red} first second i标签的第一个元素，也就是first，颜色会变红。...，然后定义这个类的样式。... 总结伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

4.3K8 0

CSS中的伪类和伪元素

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

4.7K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

CSS 中的 ::before 和 ::after 伪元素

一、CSS 伪元素 CSS伪元素是指，在CSS 中使用一些特殊的选择器，创建出来的虚拟元素，并不是实际存在的HTML元素；用来选择和操作文档中的特定部分，实现一些特殊效果；伪元素使得在不增加额外HTML...标签的情况下，对文档中的内容进行样式化；伪元素也是一种元素，可以设置html中支持的各种属性，包括元素的布局、定位、宽高、背景等等；本文主要介绍::before 、::after 这个两个伪元素的相关内容和一些使用场景...，content的属性值可以为空；伪元素的display属性值默认为inline； 1、::before ::before选择器用来向指定元素之前插入内容；（1）语法元素::before{ content... 我是HTML元素中的文本（2）设置媒体链接通过url()属性值，即可导入媒体文件为伪元素的内容； .... 添加前引号添加后引号（4）获取元素属性通过attr()获取元素的某一个属性值（以字符串的形式返回），并设置为伪元素的内容

1.4K1 0

CSS 3.0中伪元素after和before的妙用

我们常用CSS 3.0中的伪元素来修饰一些细节，让页面看起来效果更好，比如下面这个图片中的面包屑导航中的符号，还有任务清单前的序列符号，都是用伪元素实现的。 ?...以下是代码实现，希望能对初学者有一个简单的认识。 CSS...3.0中伪元素after和before的妙用 /* 面包屑导航 */ .breadcrumb {

1.7K1 0

利用css中的伪类给元素设置特殊样式效果

left: 0; right: 0; top: 0; height: 2px; } 最近在看一篇文章，网站中有一个图标，鼠标划上去会出现一个彩色的小边...效果如下： www.w3h5.com 查看代码发现标签上有一个:hover，鼠标划入时添加一个:after伪类，给这个伪类设置背景渐变、绝对定位和高度，实现了这种“炫酷”的效果。...声明：本文由w3h5原创，转载请注明出处：《利用css中的伪类给元素设置特殊样式效果》 https://www.w3h5.com/post/51.html

4.4K0 0

【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式

CSS伪类伪类：伪类这个叫法源自于它们跟类相似，但实际上并没有类会附加到标记中的标签上。...伪类分为两种(以及新增的伪类选择器)： UI伪类：会在HTML元素处于某种状态时(例如：鼠标指针位于连接上)，为该元素应用CSS样式。...:hover 结构化伪类：会在标记中存在某种结构上的关系时例如：某元素是一组元素中的第一个或最后一个，为该元素应用CSS样式。...匹配Selector选择器的元素中当前被选中的内容。...伪元素就是说在你的文档中若有实无的元素 (解释说明：在HTML代码中没有，我们可以通过css的样式设置伪元素，让它显示给我们看到) 伪元素： ::first-letter 伪元素第一个字母 ::

5301 0

css面试点三：清除浮动的九中方法-高度塌陷理解-伪元素使用

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

1.7K2 0

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 在元素之前添加内容。

1.1K1 0

前端学习(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，则该位置失效。

9612 0

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

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

7831 0

深入解析 CSS 选择器

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

1.2K5 0

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

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

7941 0

重新认识伪类和伪元素

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

1.7K2 0

CSS 选择器 — 重学前端

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

1.2K4 1

【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 锚点元素，选中的元素中的文字将会显示为橙色

1.2K3 0

CSS Selectors Level 4新特性全面解析

下面我们可以对目前 W3C 工作草案中的 CSS Selectors Level 4 新特性进行一个阶段性总结，之所以叫阶段性，是因为未来可能有更多的新特性加入。...在 CSS3 中已经有 :not()，不过在 CSS3 中只能使用简单的匹配规则，例如 :not(p) 用来选择不是的元素。...Case-Sensitivity 用于声明某个匹配规则中，对字符串或者某个 value 的匹配不区分大小写。...:column(selector) :column(selector) 将匹配例如中带有 selector 类名的那一列的所有元素。...中的规范，但在 CSS Selectors Level 4 中加入了 :blank，它和 :empty 类似，区别在于 :empty 只能匹配没有任何内容的元素，而 :blank 可以匹配带有 spaces

2.4K7 0

2025 年最新 CSS 面试题 100 道及详细答案解析

通常放在CSS文件开头，但它的加载顺序可能导致一些问题，且兼容性不如标签，不推荐大量使用。3. 标准的CSS盒子模型是怎样的？低版本IE的盒子模型有何不同？...LVHA是指CSS中4种常见的链接伪类，按照特定顺序使用时能确保链接在不同状态下有正确的样式表现，它们分别是：:link：选择未被访问过的链接。...为保证这4种伪类按预期工作，应按照a:link -> a:visited -> a:hover -> a:active的顺序书写样式，即所谓的“爱恨原则（LoVe/HAte）”。...若不按此顺序，可能导致某些状态下样式不生效，如将a:hover写在a:link之前，那么:hover样式可能在未访问链接时就无法正常显示。8. CSS3新增伪类有哪些？...例如，p:first - of - type选择每个父元素中的第一个元素。在一个包含多个段落和其他元素的中，它能准确选中第一个。

1.1K0 0

100道CSS面试题及答案

通常放在CSS文件开头，但它的加载顺序可能导致一些问题，且兼容性不如标签，不推荐大量使用。 3. 标准的CSS盒子模型是怎样的？低版本IE的盒子模型有何不同？...LVHA是指CSS中4种常见的链接伪类，按照特定顺序使用时能确保链接在不同状态下有正确的样式表现，它们分别是： :link：选择未被访问过的链接。...为保证这4种伪类按预期工作，应按照a:link -> a:visited -> a:hover -> a:active的顺序书写样式，即所谓的“爱恨原则（LoVe/HAte）”。...若不按此顺序，可能导致某些状态下样式不生效，如将a:hover写在a:link之前，那么:hover样式可能在未访问链接时就无法正常显示。 8. CSS3新增伪类有哪些？...例如，p:first - of - type选择每个父元素中的第一个元素。在一个包含多个段落和其他元素的中，它能准确选中第一个。

3851 0

CSS 中 `data-status` 的使用详解

属性选择器匹配 [data-status]：选中所有带有 data-status 属性的元素。...[data-status="active"]：选中 data-status 属性值完全等于 active 的元素。 [data-status*="pen"]：选中属性值包含 pen 的元素。...[data-status^="act"]：选中属性值以 act 开头的元素。 [data-status$="ing"]：选中属性值以 ing 结尾的元素。 2....伪元素 attr() 函数说明 attr() 函数目前只能用于 content 属性，用于在伪元素中显示属性值，如： div::before { content: attr(data-status...CSS 属性选择器（如 [data-status="value"]）能根据属性值精准匹配并应用样式。配合 attr() 可在伪元素中动态显示属性值。

3051 0

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

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

2.6K4 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭