访问过的兄弟姐妹的风格

2024-03-05

我的 HTML 看起来像这样:

<ul>
    <li>
        <a></a>
        <a></a>
        <a></a>...
    </li>
</ul>

我想将样式应用于访问链接的所有同级链接。 我试过:

ul>li>a:visited ~ a{
    color: green !important;
}

但什么也没发生。但

ul>li>a:first-child ~ a{
    color: green !important;
}

工作得很好。 将样式应用到<li>访问过的链接也适合我。


尝试对上面的内容进行一些修改,这个选择器应该可以工作。在这里,我试图选择任何的兄弟姐妹a嵌套在li,后来我忽略了a哪些尚未访问过。这应该模拟您正在寻找的效果。


Preview for the same: Select visited siblings


ul > li > a ~ a:not(:visited) {
  color: red;
}
<ul>
  <li>
    <a href="https://google.com">Google</a>
    <a href="https://medium.com">Medium</a>
    <a href="https://stackoverflow.com">Stackoverflow</a>
    <a href="https://google.com">Google</a>
    <a href="https://medium.com">Medium</a>
    <a href="https://medium.com">Medium</a>
    <a href="https://google.com">Google</a>
    <a href="https://google.com">Google</a>
    <a href="https://google.com">Google</a>
  </li>
</ul>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

访问过的兄弟姐妹的风格 的相关文章

  • PSD 到 html 转换 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 绝对元素后面元素上的文本选择

    我有一个覆盖元素 它隐藏了其他包含文本的 div 覆盖元素是绝对定位的 我希望用户能够选择这些 div 后面的文本 我的解决方案是隐藏用户事件 mouseDown 上的覆盖层 显示 无 并在 mouseUp 事件发生时再次显示它 这样 一旦
  • css伪类最后一个子问题

    我在使用时遇到问题 last child伪选择器 我有以下标记 div class apply container div
  • 防止浏览器弹出警告窗口

    我正在尝试在新窗口中打开 jsp 页面 使用 JavaScriptwindow open产生浏览器警告 并且在某些情况下 firefox 将默认阻止弹出窗口 有没有办法解决这个问题 这不是恶意应用程序 它是内部用户工具 大多数浏览器不会阻止
  • 检测视频何时缓冲,如果缓冲则显示 gif

    我想知道是否有办法在视频缓冲时显示 gif 我正在使用 HTML5 视频标签 其中有一种方法可以检测视频何时缓冲 如果没有 是否有替代方法 我看过 如何检测视频何时缓冲 https stackoverflow com questions 1
  • JavaFX 2:TableView:删除标题+空时显示网格

    我有两个关于 Javafx 2 中的 TableView 的问题 1 是否可以隐藏表格中的标题 2 当表为空时 它只显示一个白色窗格 上面写着 表中没有内容 是否可以更改此设置以显示默认网格 即使表格为空 如果可能的话 我想要一个带有 CS
  • 强制 PayPal 始终请求信用卡信息而不是登录表单?

    我们的网站采用贝宝付款标准 当用户在我们的网站上填写他们的请求并按下 PayPal 按钮 立即购买 时 我们会将所有变量提交给 PayPal 以便他们可以处理付款 对于那些以前从未使用过贝宝并通过我们的网站付款的用户来说 它运行得非常好 因
  • 自动更改时 onChange 事件不起作用

    我在一个选择框 usageDisplays 上有一个 onChange 事件 它根据第一个选择框的选定值填充下一个选择框
  • 使用 Java 编程式 HTML 文档生成

    有谁知道如何在 Java 中以编程方式生成 HTMLDocument 对象 而不需要在外部生成字符串 然后使用 HTMLEditorKit read 来解析它 我问的两个原因 首先 我的 HTML 生成例程需要非常快 并且我认为将字符串解析
  • CSS 比例和方形中心裁剪图像

    所以我的应用程序中有一个缩略图集合 其大小为200x200 有时原始图像没有这个比例 所以我计划将此图像裁剪为正方形 目前它只是拉伸图像以适合缩略图 所以说我的原始图像大小是400x800 那么图像看起来就很压扁 我想裁剪此图像 以便它查看
  • 生成的表的行跨度导致额外的单元格

    HTML table border 1 cellspacing 1 width 100 thead tr td class csstextheader width 70px td td class csstextheader width 7
  • Video.js - 阻止点击播放功能

    我正在使用 video js 将视频嵌入到 HTML 页面中 它将用作仅适用于 ipad 的 Web 应用程序 因此我相信它使用的是本机 HTML5 播放器 我正在尝试禁用点击播放功能 以便用户必须使用控件 但我在这样做时遇到了麻烦 我尝试
  • Bootstrap 4:卡片作为具有相同高度和宽度的网格

    我正在尝试在具有相同高度和宽度的网格中订购卡片 这些卡片将有不同的内容和不同的尺寸 每行也应该有 3 个 每行的高度可以不同 但 行内的高度应该相同 整个网格中每张卡片的宽度应该相同 div class container div clas
  • z-index 属性到底如何工作?

    如何z index实际上工作吗 它是否对未指定的元素起作用position 它是否支持具有指定的元素 即将它们放在顶部 position 像这样的数字必须是负数吗 div below div div less below div div o
  • 关闭 Godot 中的游戏

    我正在使用 Godot 创建网页游戏 为了关闭游戏 我尝试使用 get tree quit 如果我在 IDE 上使用它 它就可以工作 当我在我的服务器上尝试它时 导出项目后 它不起作用 我确信导出设置没问题 我怎样才能关闭游戏 并且 如何添
  • 使用 Jquery 更改 css 属性时的事件检测

    有没有办法检测元素的 显示 css 属性是否更改 是否更改为无 块或内联块 如果没有的话有什么插件吗 谢谢 Note 突变事件 https developer mozilla org en US docs Web Guide Events
  • 元素上的框阴影行为

    Update 在我提交错误报告后 https bugs chromium org p chromium issues detail id 763337 https bugs chromium org p chromium issues de
  • 如何像在浏览器中一样检索准确的 HTML

    我正在使用 Python 脚本来呈现网页并检索其 HTML 它适用于大多数页面 但对于其中一些页面 检索到的 HTML 不完整 我不太明白为什么 这是我用来废弃此页面的脚本 由于某种原因 每个产品的链接不在 HTML 中 Link http
  • 将水平线添加到 html rmarkdown 文档隐藏文本部分

    我正在制作一个与 HTML 页面结合的 Rmarkdown 文档 我不想用标题或项目符号分隔某些文本部分 而是想在它们之间绘制水平线 根据http rmarkdown rstudio com authoring basics html ht
  • HTML 文本框,自动突出显示文本

    我将如何制作一个包含预先存在的文本的文本框 当用户在其中单击时 其中的所有文本都会突出显示 例如 YouTube 在其视频上使用嵌入代码的文本框的方式相同 谢谢 如果我正确理解你的问题 你可以使用一些javascript 未经测试的代码

随机推荐