有没有办法提取 CSS 选择的属性值？

Question

我的想法与content 属性的attr() 值一致。

我想到的代码类型的一个例子是：

.class[attribute=attr(attribute)]:first-of-type .child{
    color: green;
}

我知道这可以在 jQuery 中完成，但由于我无法操作正在重新设置样式的页面，因此最好使用 CSS 方法。

编辑：由于这可能会混淆我想要的内容，因此我将为我想要选择的内容提供一些示例 HTML。

<div class="class" attribute="mrmcpowned">
    <span class="child">Test1</span>
</div>
<div class="class" attribute="mrmcpowned">
    <span class="child">Test2</span>
</div>
<div class="class" attribute="mrmcpowned">
    <span class="child">Test3</span>
</div>
<div class="class" attribute="mrmcpowned">
    <span class="child">Test4</span>
</div>
<div class="class" attribute="friend">
    <span class="child">Test1</span>
</div>
<div class="class" attribute="friend">
    <span class="child">Test2</span>
</div>
<div class="class" attribute="friend">
    <span class="child">Test2</span>
</div>
<div class="class" attribute="friend">
    <span class="child">Test3</span>
</div>
<div class="class" attribute="otherfriend">
    <span class="child">Test1</span>
</div>
<div class="class" attribute="otherfriend">
    <span class="child">Test2</span>
</div>
<div class="class" attribute="otherfriend">
    <span class="child">Test3</span>
</div>

我希望每个第一个 <div> 都具有要选择的任何值的属性，而不偏向于该值，例如第一个<div>，属性值为mrmcpowned，第一个<div>，属性值为friend，第一个<div>，属性值为otherfriend。

Answer 1

简短的回答是“不”。

您无法在 CSS 中提取所需的属性值。但是，您的示例可能有一个解决方案，具体取决于确切的参数。那就是……

你可以选择第一个没有偏见，但不能没有知识

我不确定这是否适合您，但它确实符合您在对问题的扩展编辑中所要求的内容。您说您希望选择第一个“不偏向于价值”。 这是 100% 可以实现的，假设您了解所有可能的值。

也就是说，可以构造 css，使得任何值跟随任何不同的值，都会进行切换（这是没有偏见的），但是要让 css 做到这一点，您需要知道所有可能的单个值是什么是。根据您的.class[attribute=attr(attribute)]:first-of-type .child 伪代码，我怀疑是这种情况，因为这似乎是在尝试读取 unknown 值。但是，如果我误读了这一点，而您实际上确实知道所有可能的值，但不知道它们可能出现的顺序，那么以下解决方案有效：

See Fiddle Example

CSS

.class[attribute]:first-of-type .child,
.class[attribute="mrmcpowned"] + .class:not([attribute="mrmcpowned"]) .child,
.class[attribute="friend"] + .class:not([attribute="friend"]) .child,
.class[attribute="otherfriend"] + .class:not([attribute="otherfriend"]) .child {
    color: red;
}

注意第一个选择器是如何简单地选择定义了任何 [attribute] 的第一种类型的项目，因此它会在不偏向属性名称的情况下命中组的第一个。然后所有其他选择器都是使用相邻兄弟组合器的正/负配对。当friend 是:not() 后跟另一个friend 时，这些每个特定属性值的配对（这就是为什么您需要了解所有可能值的原因）会找到“中断”。

如果您不了解 attribute 的所有可能值，那么使用纯 css 是不可能的。

Answer 2

您应该能够将属性放在括号中，就像您在括号中所拥有的一样。这是我从 W3Schools 中提取的一个示例，用于选择属性“type”等于“text”的输入标签

input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}

您可以在此处查看 W3Schools 链接以获取更多信息：CSS Attribute Selector

Answer 3

我认为你只是想要是不是不正确

.class[attribute="attr(attribute)"]:first-child .child{
    color: green; 
}

first of type 本质上与 first child 相同。

here's the fiddle

Answer 4

是的。使用属性选择器。

HTML：

<img src="untitled.png" title="getme">

CSS：

[title="getme"] {
    display: block;
}

这是 Mozilla 参考： https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors