Question

我正在寻找一种方法来使用纯CSS选择器（而不是脚本）来选择元素的属性，而不是元素本身。我知道XPath可以做到但可以选择CSS选择器吗？

示例，给定：

<img alt="image" src="photo.jpg">

我可以使用CSS选择器访问src属性吗？

更新

我不想设置任何元素的值，我只想选择文本“photo.jpg”。

Answer 1

因为CSS选择器起源于CSS的基本部分，而CSS只能将样式应用于元素（因为属性只是元素元数据，而不是独立对象），CSS选择器无法在CSS中单独匹配属性。

但我怀疑你实际上并没有在这里询问CSS。你只是在询问选择者。您可能正在使用诸如Selenium之类的Web自动化工具或支持CSS选择器或XPath的众多HTML解析库之一。其中一些库以伪元素的形式支持非元素选择器，例如::attr()（我不记得哪些），你还没有提到你正在使用的工具所以我无法告诉你是否可以使用它。请注意，这与不与注释中提到的CSS attr()函数相同 - 这是一个CSS函数，它是一个值，而不是一个选择器，因此它不能被使用在选择器中。

但是如果你的图书馆没有这样的功能，那么你需要直接选择img元素并分别查询其src属性（再次，你如何做这完全取决于你使用的是什么，这就是为什么它有助于特定于这种事情），或者如果可能的话使用XPath。

Answer 2

CSS Tricks有一篇文章我认为可以回答你的问题： https://css-tricks.com/almanac/selectors/a/attribute/

如果您尝试使用css设置某个元素属性的值，我很确定除了content属性之外的任何其他内容都是不可能的。

Answer 3

CSS不是一种编程语言，无法处理数据。

它的唯一目的是告诉浏览器某个元素应该是什么样子，比如将文本着色为红色。

要处理网页中的数据，您可以使用javascript（可以使用CSS规则）来抓取网页中的某种类型的元素，例如，这将返回类型{的所有元素的列表{1}}

img

现在，有了一个列表，你可以遍历它并像这样得到每个var imglist = document.querySelectorAll('img');

src

是否可以使用CSS选择器选择元素的属性？

3 个答案: