如何定位具有在 CSS 中具有任何值的属性的元素-前端问题

How do I target elements with an attribute that has any value in CSS?(如何定位具有在 CSS 中具有任何值的属性的元素?)

本文介绍了如何定位具有在 CSS 中具有任何值的属性的元素?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I know that I can target elements which have a specific attribute in CSS, for example:

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

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

But is it possible to target elements which have an attribute of any value (except nothing i.e. when the attribute hasn't been added to the element)?

大概是这样的:

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

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

Which should target the first and third <a> tags in this HTML:

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

我认为这是可能的，因为默认情况下，cursor:pointer 似乎适用于任何 <a> 标记，其 href 属性.

I figure it's possible because by default, cursor: pointer seems to be applied to any <a> tag which has a value for its href attribute.

推荐答案

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

The following will match any anchor tag with a rel attribute defined:

a[rel]
{
    color: red;
}

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

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

Update: To account for the scenario @vsync mentioned, in the comment section (differentiating between emtpy/non-empty values), you could incorporate the CSS :not pseudo-class:

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

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

这篇关于如何定位具有在 CSS 中具有任何值的属性的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！