html - 我将如何使用 CSS 选择它？

Question

假设我有以下内容..

<div>
    <div>
        <div>
            <div></div>  <<<Select this one..
            <div></div>  <<<Not this one..
            <div></div>  <<<Select this one..
            <div></div>  <<<Select this one..
        </div>
    </div>
</div>

如何在不添加任何类或 ID 的情况下选择这 3 个 div？这可能吗？

Answer 1

您可以使用 :not()和 :nth-child()伪类。

div > div > div > div:not(:nth-child(2)){
  color: red;
}

<div>
  <div>
    <div>
      <div>Test</div> 
      <div>Test</div>
      <div>Test</div>
      <div>Test</div>
    </div>
  </div>
</div>

Demo in jsFiddle

Note: For ie8 support, you could use the same selector in jQuery and style your element that way.

$("div > div > div > div:not(:nth-child(2))")
	.css("background-color", "yellow")

<div>
  <div>
    <div>
      <div>Test</div> 
      <div>Test</div>
      <div>Test</div>
      <div>Test</div>
    </div>
  </div>
</div>

<!-- External Resources -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>