Question

有没有人知道我如何定位div，并设置样式，当它在另一个div中并且它没有id或class时。

<div class="wrapper">
    <div>
    </div>

    <div>
    </div>

    <div>
    </div>
</div>

我如何以div 2为目标。

Answer 1

.wrapper div:nth-child(2) {
    color: red;
}

nth-child可让您选择特定项目。还有first-child和last-child用于选择第一个/最后一个项目。

数字 2 也可以是3n+0之类的函数。这将从0开始选择每三个项目。查看此codepen以获取示例。

最后但同样重要的是，您还有nth-of-type(2)。每次出现相同的图案时，这将改变每隔一个项目。我还在同一个codepen中添加了一个示例。

Answer 2

.wrapper > div:nth-child(1) {
  //css rules for a div that is the first child of .wrapper
}

.wrapper > div:nth-child(2) {
  //css rules for a div that is the second child of .wrapper
}

注意＆gt;是必要的，否则它将针对任何后代的div（孙子等），而不仅仅是直接的孩子。

Answer 3

.wrapper div:nth-child(2) {
  background: blue;
  height:200px;
  width:200px;
}

无论你传入第n个孩子的数字是什么，都是#wrappers特定的孩子。所以你的第二个div。

参考：http://www.w3schools.com/cssref/sel_nth-child.asp

Answer 4

后代选择器是最糟糕的，不仅性能不高而且易碎，因为对HTML的更改很容易破坏你的CSS。最好只创建一个新的CSS类选择器。

// bad
.wrapper div {..}

// good
.inner-div {..}
.selecting-this {..}
.or-this {..}

<div class="wrapper">
    <div class="inner-div">
    </div>

    <div class="selecting-this">
    </div>

    <div class="or-this">
    </div> 

    <div class="inner-div">
    </div>
</div>

但是如果你不能修改html：

.wrapper div {..}

如果选择器中有空格，它会搜索带有标记为div INSIDE元素且带有给定类.wrapper的子元素

请查看更多信息。 http://modernweb.com/2013/08/12/writing-better-css/?utm_source=html5weekly&utm_medium=email

定位没有类或id的div

4 个答案: