Question

假设我有两个HTML元素： element1 和 element2 。它们是动态创建的，因此我无法使用ID：

<element1 class='class1' selected="true" ...[other_attributes]...>
<element1 class='class1' selected="true" ...[other_attributes]...>
<element1 class='class1' selected="false"...[other_attributes]...>
.................................................................
{other <element1> elements}
.................................................................
<element2 class='class2' selected="true" ...[other_attributes]...>
<element2 class='class2' selected="false"...[other_attributes]...>
.................................................................
{other <element2> elements}

现在，我想要做的是对element1和element2使用相同的属性（选中），当element1上的selected =“true”有一个css，而当element2上的selected =“true”时有不同的CSS。也许是这样的：

[selected=true]
{
  color.red
}

[selected = true]
{
    color.green
}

除此之外，我想以HTML将识别要在不同元素上分配的css的方式来实现它。

我希望我足够清楚。

我该怎么做？

Answer 1

如果它与您使用的元素相同，则classes和IDs适用于：{/ p>

<element id="ID1" class="red" selected="true">
<element id="ID2" class="green" selected="true">

使用IDs：

element#ID1[selected=true]
{
    color:red;
}

element#ID2[selected=true]
{
    color:green;
}

使用classes：

element.red[selected=true]
{
    color:red;
}

element.green[selected=true]
{
    color:green;
}

请注意，IDs必须唯一，而classes可以在任意数量的元素上使用。

修改：根据修改过的问题：

element.class1[selected=true]
{
    color:red;
}

element.class2[selected=true]
{
    color:green;
}

或者你可以根据他们的父母（如果他们不同）：

parent#ID1 element[selected=true] { ... }
parent#ID2 element[selected=true] { ... }

Answer 2

自您更新示例代码后编辑，我将原始答案保留在下面以供参考

混合类和属性选择器，如下所示：

<强> HTML

<input class="class1" name="input" />
<input class="class1" />
<input class="class1" name="input" />

<input class="class2" name="input" />
<input class="class2" />

<强> CSS

.class1[name=input]
{
    border: 1px solid red;
}

.class2[name=input]
{
    border: 1px solid green;
}

原始答案

在CSS3中，你有:nth-of-type(n)选择器，如下所示：

<强> HTML

<input name="test" value="First element">

<input name="test" value="Second element">

（请注意，上面的示例标记非常糟糕，永远不应该在现实生活中完成！）

<强> CSS

<style>

    [name=test]:nth-of-type(1)
    {
        color: red;
    }

    [name=test]:nth-of-type(2)
    {
        color: green;
    }

</style>

http://www.w3schools.com/cssref/sel_nth-of-type.asp

的更多信息

Answer 3

使用它：

element1[selected="true"]
              {
  color:red
}

element2[selected="true"]
             {
color:green
}

在具有相同属性的不同元素上应用不同的css

3 个答案: