Css 需要选择器帮助

Question

我有这样的作文：

<div class="theclass1"> 
     <input type="checkbox" id ="1">
     <div>
        <div>
          <div>
          <label for="1">bla bla</label>
          </div>
        </div>
        <input type="checkbox" id ="yy">
        <label for ="yy">other</label>
     </div>

  <div class="theclass2">  
    <input type="checkbox" id ="2">
    <div>
      <div>
         <div> 
         <label for="2">bla bla</label>
        </div>
      </div>
        <input type="checkbox" id ="xx">
        <label for ="xx">other</label>
    </div>  
  </div>

</div>

我想（而且我超级 cofused）将 css 样式应用到标签，但只应用 'theclass1'

中的第一个

我正在玩 first-of-type, first child, +div >div>div 等等...没有成功。

也许有人可以向我解释如何制作这个，如果可能的话使用一些例子。我在理解 space、+ 和 > 选择器的含义时遇到了很多麻烦。另外...我认为它可以有不止一种解决方案？

我只需要代码来设置 theclass1 的第一个标签的样式，或者里面的第一个 >div>div>div 但只有这个。对于 theclass2 也有类似的东西。现在我有一个污染 css 和不良结果。

（div 'theclass2' 在 div theclass1 里面。）

提前致谢。

Answer 1

.theclass1 > div:first-of-type > div > div > label {
    color: red;
}

http://jsfiddle.net/807t5L6z/

Answer 2

.theclass1 label:first-child {
color:red;
}

您可以在 .the class 2

中使用这个可能类似的标签代码

Answer 3

一般的回答是"global first label in HTML"无法完成，请看这里：CSS global :nth-of-type selector (:nth-of-class)

而且这个标签最好引入class或者id。

但是，如果你想在不修改 HTML 的情况下定位它，你可以使用这个选择器：

label[for='1'] {
    background:red
}

Answer 4

 .theclass1 > div > div > div label {color:red;}

Answer 5

问题不只是CSS，你的HTML

中存在严重的语义错误

id 属性名称不能以数字开头

取自 HTML4 w3c 文档

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

这么多嵌套，为什么这些额外的父级 div div 和 div？
现在首先修复 HTML 节点，然后在 css

如果你只想要第一个 div class

的第一个标签

 .theclass1:first-child > label:first-of-type

working DEMO

Css 需要选择器帮助

Css selectors help needed

css

css-selectors