0

假设我有两个 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。

我希望我足够清楚。

我该怎么做呢？

4

3 回答 3

2

如果它与您使用的元素相同，那么这classes就是IDs：

<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] { ... }
于 2013-03-08T15:51:09.547 回答
0

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

像这样混合类和属性选择器：

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

于 2013-03-08T15:57:50.210 回答
0

用这个：

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

element2[selected="true"]
             {
color:green
}
于 2013-03-08T16:09:24.747 回答