CSS 子选择器

Question

我在 li 中有两个标签，我想设置第二个标签的样式，有没有办法定位第二个标签。它必须在 IE7 上工作

我这样写

         <ul>
          <li>
             <label for="asi plan status">A&SI Accountable VP:</label>
             <label>Tye Schriever</label>
           </li>
            </ul>

ul li label label{color:red}

还有其他方式吗..？

Answer 1

您可以使用 css2 :first-child 属性定义 common & 中第二个标签的属性通过 first-child 您可以覆盖第一个 label 的 css 属性，如下所示：

label{color:red}
label:first-child{color:yellow}

IE7 也支持它，但方法不同。

Answer 2

如果您只需要定位第二个标签而无需其他任何内容，则可以使用

ul li label + label

不需要覆盖或 CSS3 的 :last-child 或添加类来解决 IE 等问题。尽管评论提到了 IE7 和 IE8 + 选择器出现问题，在这种情况下它应该可以正常工作。

Answer 3

您可以使用 :last-child-selector，但是Internet Explorer 不支持该功能。

li label:last-child { color:red }

为标签分配一个类属性，以使其在所有浏览器上正常工作。

Answer 4

正如其他人提到的，有合法的 CSS 选择器可以实现您想要的，但 IE7 不支持这些选择器。

当我需要在 IE7 中修补对 :last-child 的支持时，我将这种技术与 jQuery 结合使用：

$('li label:last-child').addClass('last-child');

然后在我的 CSS 中我可以使用 use

li label.last-child {
  /* some styles here */
}

所以我们利用 jQuery 出色的 CSS 选择器支持来应用一个类您想要设置样式的元素，然后在 CSS> 中设置它们的样式