【问题标题】:How do I target elements with an attribute that has any value in CSS?如何定位具有在 CSS 中具有任何值的属性的元素?
【发布时间】:2023-03-16 13:25:02
【问题描述】:

我知道我可以定位在 CSS 中具有 特定 属性的元素,例如:

input[type=text]
{
    font-family: Consolas;
}

但是是否可以定位具有任何值的属性的元素(除了没有,即没有将属性添加到元素时)?

大概是这样的:

a[rel=*]
{
    color: red;
}

应该针对此 HTML 中的第一个和第三个 <a> 标记:

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

我认为这是可能的,因为默认情况下,cursor: pointer 似乎适用于任何具有href 属性值的&lt;a&gt; 标记。

【问题讨论】:

    标签: css css-selectors


    【解决方案1】:

    以下内容将匹配任何定义了rel 属性的锚标记:

    a[rel]
    {
        color: red;
    }
    

    http://www.w3.org/TR/CSS2/selector.html#pattern-matching


    更新: 为了解释@vsync 提到的场景,在评论部分(区分空值/非空值),您可以合并 CSS :not pseudo-class

    a[rel]:not([rel=""])
    {
        color: red;
    }
    

    https://developer.mozilla.org/en-US/docs/Web/CSS/:not

    【讨论】:

    • 这也针对空值,有时你想要任何值,除了empty
    • 最后一个例子应该是a[rel]:not( [rel=""] )
    • 不幸的是,not 技巧最终是非动态的。我尝试这样做以突出显示input 字段,当它们有值时与它们没有值时相比,似乎一旦页面加载,如果输入值(或当它存在时),则不会重新评估样式开始,它已被删除)。
    • 输入属性仅用于初始值,对值的更改不会反映回属性。您可以通过检查浏览器中的 DOM 来进行验证。所以这个答案完美地工作并且动态地对属性的实际变化做出反应。
    【解决方案2】:

    是的,在 CSS 3 选择器中有几个 attribute selectors

    例如

    [att] 表示具有 att 属性的元素,无论该属性的值如何。

    [att=val] 表示具有 att 属性的元素,其值恰好是“val”。

    [att~=val] 表示具有 att 属性的元素,其值为以空格分隔的单词列表,其中一个恰好是“val”。如果 “val”包含空格,它永远不会代表任何东西(因为 单词之间用空格隔开)。此外,如果“val”是空字符串,它 永远不会代表任何东西。

    [att^=val] 表示具有 att 属性的元素,其值以前缀“val”开头。如果“val”是空字符串,那么选择器 不代表任何东西。

    [att$=val] 表示具有 att 属性的元素,其值以后缀“val”结尾。如果“val”是空字符串,那么选择器会 不代表任何东西。

    [att*=val] 表示具有 att 属性的元素,其值至少包含子字符串“val”的一个实例。如果“val”为空 字符串然后选择器不代表任何东西。

    【讨论】:

      【解决方案3】:

      应该补充一点,如果浏览器默认设置属性,您可能需要解决。这在“现代”浏览器中似乎不是问题,但是,这是我见过的问题,因此请务必检查跨浏览器性能。

      例如,我发现在 9 之前的 IE 中,为 Table 中的所有 TD 设置了 colSpan,因此任何单个单元格的隐藏 colspan 值为 1。

      因此,如果您在 webdoc 中应用“任何带有 colspan 属性的 TD”,即使 td 没有设置 colspan 属性,例如任何 TD 是单个单元格,也会收到 css 样式。 IE 小于 9 基本上都会给它们设置样式!

      担心这一点的唯一理由是所有无法升级到 IE8 以上的 XP 用户。

      例如,我有一组表格,其中的内容可能会从头到尾移动,在结尾或开头留下 1 到 7 个单元格空白。

      我想使用 colspan 属性在结尾或开头的任何空白单元格上应用颜色。 使用以下在 IE 小于 9 中不起作用

      #my td[colspan] {background-color:blue;}
      

      ...所有 TD 都会被样式化(很有趣,因为条件属性样式在 IE 中被认为是优越的,但我离题了...)。

      当我将 colspan 的值设置为“single”以用于我希望包含在样式方案中的任何单独单元格/TD 时,在所有浏览器中使用以下方法,但是它是“hack”并且不会正确验证...

      #my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */
      #my td[colspan="2"] {background-color:blue;}
      #my td[colspan="3"] {background-color:blue;}
      #my td[colspan="4"] {background-color:blue;}
      #my td[colspan="5"] {background-color:blue;}
      #my td[colspan="6"] {background-color:blue;}
      #my td[colspan="7"] {background-color:blue;}
      

      或者,您应该能够使用“if lt IE 9”覆盖的条件样式更恰当地解决问题。这将是执行此操作的正确方法,请记住,您必须在此过程中从 IElt9 隐藏“正确构造的 css”,我认为唯一正确的方法是使用选择性样式表。

      无论如何,我们中的大多数人已经这样做了,但无论如何,您仍然可以考虑并测试浏览器是否在没有看到自动属性时应用自动属性,以及它如何处理您在属性值样式上的其他正确语法。

      (顺便说一句,colspan 恰好不在 css 规范中 [as of css3],所以这个例子不会引发验证错误。)

      【讨论】:

      • > 唯一担心这一点的原因是所有剩余的 XP 用户无法升级到 IE8 以上。 你会这样认为,直到你遇到使用 IE8 的企业环境在 Win7 上。
      猜你喜欢
      • 2011-08-03
      • 2016-06-25
      • 1970-01-01
      • 2022-07-30
      • 1970-01-01
      • 2018-02-09
      • 2017-03-29
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多