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

你应该能够将属性放在括号中，几乎就像你在那里一样。这是一个我从W3Schools中选择输入标签的例子，其中“type”属性等于“text”

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

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

Answer 2

我认为你只是想错误

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

第一个类型与第一个孩子基本相同。

here's the fiddle

Answer 3

是。使用属性选择器。

HTML：

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

CSS：

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

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

Answer 4

简短回答是“不。”

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

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

我不确定这是否适合您，但它确实遵循您在扩展编辑问题时所要求的内容。你说你想要选择第一个“没有偏见价值”。 这是100％可实现的，假设您已了解所有可能的值。

也就是说，可以构造css，使得无论任何值跟随任何不同的值，都会进行切换（这没有偏差），但是要获得css来执行此操作，您需要知道所有可能的单个值是。根据您的.class[attribute=attr(attribute)]:first-of-type .child伪代码，我有一些疑问，就是这种情况，因为它似乎试图读取未知值。但是，如果我误解了这一点，并且您确实知道了所有可能的值，而不是它们可能出现的顺序，那么以下解决方案可以工作：

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()后跟另一个{{ 1}}。

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

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

4 个答案:

简短回答是“不。”

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