用于选择相对于特定元素的元素的CSS选择器

我想通过仅使用CSS来在输入周围绘制彩色边框。我不确定它是否可以用纯CSS完成，但也许有一个css3选择器，我监督了？用于选择相对于特定元素的元素的CSS选择器

这里有一个迷你小提琴：http://jsfiddle.net/tsolti/rquf4kxh/

<table> 
    <tr> 
    <td> 
     <input class="error" value="red border"/><br/> 
     <input id="1" value="green border"/> 
    </td> 
    <td> 
     <input id="2" value="blue border"/> 
    </td> 
    </tr> 
</table>` 

.error { 
    border: 1px solid red; 
}

我想＃1获得绿色边框和＃2有一个蓝色边框。有任何想法吗？同样：没有JS允许:)

重要提示：只有当第一个输入有class =错误时，它们才会被着色。

来源

2014-09-11 Thomas Solti

你可以这样做：

DEMO

CSS：

.error { 
    border: 1px solid red; 
} 

td input.error ~ input { 
    border:1px solid green; 
} 

td + td input { 
    border:1px solid pink; 
}

编辑的问题进行修改后，包括条件的颜色只应设置在.error班级设置：

在当前HTML结构中，您将无法仅使用CSS定位最后一个输入，因为它不是.error元素的兄弟或后代。

解决方法：

DEMO

改变HTML标记，使得两个输入是输入.error的兄弟姐妹：

HTML：

<table> 
    <tr> 
     <td> 
      <input class="error" value="red border"/> 
      <input value="green border"/> 
      <input value="blue border"/> 
     </td> 
    </tr> 
</table>

所以，你可以用+兄弟选择他们的目标：

CSS：

.error { 
    border: 1px solid red; 
    display:block; 
} 

input.error+input { 
    border:1px solid green; 
} 
input.error+input+input { 
    border:1px solid blue; 
}

来源

2014-09-11 12:27:30

是的，但你的第二个选择器不依赖于错误类 – 2014-09-11 12:29:31

该死的..这就是我认为......非常感谢您验证它！ – 2014-09-11 12:32:43

@ThomasSolti编辑答案：在当前的html结构中，你将无法实现你的目标。 – 2014-09-11 12:32:50

你试图做这样的吗？

input[value="red border"]{ 
    border: 1px solid red; 
} 
input[value="green border"]{ 
    border: 1px solid green; 
} 
input[value="blue border"]{ 
    border: 1px solid blue; 
}

来源

2014-09-11 12:30:24

对不起，我编辑了这个问题并补充道：“只有当第一个输入有class =错误时，它们才会被着色。”我的错！抱歉 – 2014-09-11 12:31:49

用于选择相对于特定元素的元素的CSS选择器

回答

相关问题