多个 CSS 伪类

2024-04-12

将多个伪类应用于选择器的正确 CSS 语法是什么?我想在列表中除最后一项之外的每一项之后插入“,”。我正在使用以下CSS:

ul.phone_numbers li:after {
    content: ",";
}

ul.phone_numbers li:last-child:after {
    content: "";
}

这在 FF3、Chrome 和 Safari 3 上工作正常。IE7 不起作用,因为它不支持 :after (如预期)。在 IE 8 中,每个 li 后面(包括最后一个)都用逗号呈现。这是 IE8 的问题还是我的语法不正确?如果它在 IE8 中不起作用也没关系,但我想知道正确的语法是什么。


:last-child是一个伪类,而:after (or ::after在 CSS3 中)是一个伪元素。

去引用标准 http://www.w3.org/TR/CSS21/selector.html#pseudo-classes:

选择器中的任何位置都允许使用伪类,而伪元素只能附加在选择器的最后一个简单选择器之后。

这意味着根据 CSS2.1 你的语法是正确的并且CSS3也是如此 http://www.w3.org/TR/css3-selectors/#selector-syntax,即 IE8 仍然很糟糕;)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

多个 CSS 伪类 的相关文章

  • CSS精灵什么时候适合使用,什么时候不适合使用?

    CSS精灵在什么情况下适合使用 什么时候不适合使用 是节省时间还是仅节省服务器请求 我认为带宽使用将是相同的 因为图像与大图像相同 但它是在一个部分中 何时何地使用 css sprite 是节省时间 工作中 的选择 对于导航来说 它有利于翻
  • 页面中的所有 css 类都使用 js

    我希望能够获取页面上所有CSS文件的所有类名 是否存在任何现有的可能性 或者我必须自己阅读并解析它 浏览器没有api吗 也许是重复的请求 如何使用 JavaScript 读取 CSS 规则值 https stackoverflow com
  • 将 Bootstrap 导航栏列表项包裹在居中的品牌图像周围

    我整晚都在搞乱这个问题 没有解决办法 我正在使用 bootstrap 2 32 对于 joomla 模板 尚不支持 BS3 并且我将拥有动态数量的列表项 我需要将列表项居中 但也同样包裹在中心 brand img 的左侧和右侧 我可以把它分
  • 使用 Node-sass 缩小 CSS

    我在 NodeJS 项目中使用 SCSS 并让我的脚本使用以下命令将所有单独的 SCSS 文件转换为单个 CSS 文件 node sass w public css scss style scss public css style css
  • CSS - 设计类样式的不同方法

    阅读下面的 CSS 代码我想知道 a 和 b 之间有什么区别 第一个声明是一种好的样式方式吗 a round box icon b round box icon 使用 A 您选择具有 2 个类的所有元素 同时 使用 B 您选择所有具有类 r
  • 三星 Galaxy S5 媒体查询

    我做了一些搜索并尝试了一些不同的东西 但就我的一生而言 我似乎无法专门针对三星 Galaxy S5 我只是在网站上工作时尝试一些东西 但我尝试的任何东西似乎都没有针对特定设备 这是我到目前为止所尝试过的 media only screen
  • 使用 javascript 将 CSS 类添加到具有另一个类名的所有元素

    我正在尝试使用 javascript 将类添加到具有不同类的所有元素 我知道你可能认为这是多余的 但对于我所处的情况来说这是必要的 我需要一种方法来查看具有该类名称的所有元素并添加该类 但我不明白如何获取计数 我正在使用一个 cms 但我无
  • CSS/html - 使页脚仅在滚动后可见?坚持到可见页面区域下方的底部吗?

    好的 我已经完全按照这个链接进行操作 并试图实现稍微改变的效果 https css tricks com snippets css sticky footer https css tricks com snippets css sticky
  • 如何在 html 中设置 alt 工具提示的样式? [复制]

    这个问题在这里已经有答案了 是否可以为 alt 属性设置工具提示的样式 我希望为 html 设置背景 字体颜色等样式alt属性 有人可以帮我解决这个问题吗 您无法设计默认的工具提示 即设置样式alt属性 但你可以使用 Javascript
  • 隐藏行时更新奇数/偶数行颜色

    我在一页上有几个表格和一个复选框 用于根据其中一个单元格的内容显示 隐藏行 虽然所有行都是可见的 但一切都很完美 并且行颜色根据需要交替 当我隐藏行时 交替的行颜色不再正确 显然 如何轻松更新类以在选中复选框时保持交替行颜色 然后在取消选中
  • border-radius 在 safari 下失败(丑陋的剪辑)

    有人知道 Safari 中以下 错误 的解决方法吗 当我使用border radius在 CSS3 中创建圆角边框 它在 Safari FF 等上工作得很好 但是 当边框颜色是背景颜色时 您可以看到容器背景与边框重叠 你可以在这里尝试一下
  • 如何在 React Native 中做最后一个子选择器?

    我使用Scrollview 里面有3个视图 我在它们之间留了一个间隙 例如 marginRight 5 但我不希望在最后一个视图中出现这种间隙 这就是为什么我需要这种东西 你能帮助我吗 应用这个你就可以实现你在寻找什么 const styl
  • 让 div 填充空间

    我想在内容 div 的一侧放置两列 我遇到的问题是我希望柱子由 3 个部分组成 顶部和底部应该有固定的高度 但中间的高度会根据内容的高度进行调整 查看一列示例
  • bootstrap navbar-static-top 菜单分成两行

    我遇到了引导导航栏的问题 我使用 navbar static top 制作了菜单 起初一切都很好 当菜单被展开并添加了一些项目时 现在随着折叠之前的宽度 它扩展到两行 看起来很糟糕 在 CSS bootstrap 中进行了更深入的挖掘 但没
  • 将鼠标悬停在一个伪元素上时,使另一个伪元素出现吗?

    我试图生成一个屏幕 其中利用 before and after伪元素 但我想知道这样的功能是否真的可行 我有一个包装 div 它包裹在输入周围 允许pseudo element在此包装纸上 就像是 lt wrapper div lt inp
  • 在我的输入中显示多个信息

    我有一个输入 div class search field search field date search field calendar ui datepicker calendar columns small 3 div
  • 移动时如何将图像保留在另一图像后面?

    Edit Here https jsfiddle net 33cL1qos 6 我可以在选择时将其保留在后面 但由于某种原因它现在不可拖动 我可能做错了什么 我能够从计算机上传图像 然后移动图像 我的问题 当我选择图像时 它会向前弹出 直到
  • 单击或悬停在菜单区域之外时关闭反应按钮下拉菜单

    在我的反应应用程序中 其中一个组件正在创建一个按钮下拉菜单 如下所示 div class dropdown div
  • 如何创建具有动态数量的网格列的 TailwindCSS 网格?

    我正在使用 Vue3 和 TailwindCSS 并希望创建一个具有动态的网格grid cols n 班级 我知道 TailwindCSS 默认情况下最多支持 12 列 但我无法自定义主题 因为列的数量完全是动态的 给出以下纯 HTML J
  • Web 动画 API - 不同的动画持续时间?

    我正在尝试 Web Animations API 该 API 目前仅适用于 Webkit 浏览器 可以想象 文档有点稀疏 这是我在上面找到的一篇博客文章 http updates html5rocks com 2014 05 Web Ani

随机推荐

  • plantUML:泳道和重叠连接器

    我正在使用 plantUML 泳道来可视化内部流程 但不幸的是 当我想要显示已执行和分离的流程时遇到重叠线 我正在使用这个 startuml title something dee4e8 p1 c4c9cd p2 daf0fe Backen
  • 如何在空手道中运行单个场景?

    为了测试空手道的特定功能 我运行 mvn test Dkarate options classpath myfeature feature 有没有办法运行定义到功能中的单个场景 是的 您可以通过标签 https github com int
  • 仅获取用户媒体(照片) - Twitter API

    使用 Twitter API V1 1 是否可以检索用户发布的照片 我可以看到 执行此操作的一种方法是拉动用户的时间线include entities true并以这种方式搜索照片 但这似乎是一种极其麻烦的方法 而且容易出现问题 例如 我们
  • 如何在项目中实现预编译头

    我了解预编译头背后的目的和推理 然而 实施时有哪些规则呢 根据我的理解 事情是这样的 将您的项目设置为使用带有 YU 指令的预编译头 创建 stdafx h 文件并将其设置为预编译头 将此作为每个 h 文件中的顶部包含语句 这是正确的吗 您
  • 如何确认邮件已送达或未送达?

    下面是我的代码 大家看一下 System Net Mail MailMessage oMail new System Net Mail MailMessage System Net Mail SmtpClient smtp new Syst
  • 阶乘的最低有效非零数字

    我正在尝试计算阶乘中最低有效的非零数字 我有以下片段 document ready function submit click function var n number val get result n function get resu
  • PHP .htaccess -> 漂亮的 url(相反)

    我知道如何进行 URL 重写 例如 www example com index php id 1 cat 3 to www example com 1 3 管他呢 我知道 我不知道到底如何更改所有页面中的整个链接以链接到漂亮的 URL 我网
  • Angular 2 RxJS Observable:重试,429 状态除外

    我已经编写了 Observable 来自 HTTP 请求 以在失败时重试 不过 我想not如果服务器响应为重试429 Too many requests error 无论如何 当前的实现都会重试两次 间隔 1 秒 return this h
  • Xdebug 错误的 Zend API 版本号

    我在升级 MAMP 的 xdebug 时遇到问题 我运行的是 2 2 0 版本 遇到了一个已知问题 PhpStorm 和 Xdebug 在 Symfony2 控制器中没有中断 https stackoverflow com question
  • 如何在量角器中重新运行失败的黄瓜场景?

    作为测试的一部分 我使用打字稿语言来开发与量角器兼容的代码 我使用 BDD 框架 其中我在 config ts 中定义了一些黄瓜选项 如下所示 capabilities specs example feature cucumberOpts
  • 我应该如何使用 Outlook 发送代码片段?

    作为一家大公司的程序员 我经常发送包含代码示例的 Outlook 电子邮件 实际上 我会直接在电子邮件中输入代码 这不可避免地会导致问题 因为 Outlook 确实喜欢以令人愉悦但无益的方式设置文本格式 我的代码需要可以从电子邮件中复制出来
  • 快速显示图像UIImageview

    如何在 UIImageview 中显示图像 然后根据按下的按钮更改图像 我很新 请放轻松 为此 首先确保视图控制器中具有可用的图像 通过在故事板上的图像和视图控制器中创建图像之间的关联 我们假设它名为 imageView 通过编程 您可以说
  • 鼠标悬停控件并显示其手柄

    我知道 我可以编写一个函数作为表单中每个组件的事件来执行某些操作 例如 当鼠标悬停时 是否也可以在不将事件链接到特定组件的情况下调用事件函数 而是为应用程序中的所有组件调用事件函数 我想要实现的是显示例如只需将鼠标悬停在任何组件上即可获取句
  • 如何在 VS Code 中调试 Flask 应用程序

    我一直在尝试让调试器在 VS Code 中工作 以便我可以调试我的 Flask 应用程序 我已经尝试了很多选择launch json我觉得已经没有了 以下示例不起作用 https github com DonJayamanne python
  • 使用 strtok 在 C 中解析字符串

    我有这个小源代码 用于测试类似于变量的字符串的解析string我需要在其他项目中使用 include
  • Rails - has_one 关系:关联和非关联对象的范围

    我有这样的关系 一个用户可以拥有零只或一只狗 但狗必须属于某人 dog rb class Dog lt ActiveRecord Base belongs to user end user rb class User lt ActiveRe
  • 在数据库中存储布尔值的最佳数据类型是什么

    在数据库中存储布尔值的最佳数据类型是什么 最常用的 RDBMS 类型 例如 Mysql oracle postgres mssql 都支持它 您可以使用 TINYINT 或位数据类型
  • 如何将图例标题放在左侧?

    以下代码创建一个带有标题的图例 from pylab import plt plot 1 2 2 3 label sdfsdf legend title s s 位于图例的中心 我想知道如何将 s 放在左侧 最简单的选择可能是在标题后面添加
  • Hadoop 性能

    我安装了hadoop 1 0 0并尝试了字数统计示例 单节点集群 完成时间为 2 分 48 秒 然后我尝试了标准的 Linux 字数统计程序 该程序在同一组 180 kB 数据 上运行只需 10 毫秒 是我做错了什么 还是 Hadoop 非
  • 多个 CSS 伪类

    将多个伪类应用于选择器的正确 CSS 语法是什么 我想在列表中除最后一项之外的每一项之后插入 我正在使用以下CSS ul phone numbers li after content ul phone numbers li last chi