Question

我有这个HTML代码：

<div id="loggedin">
</div>
<div id="notloggedin">
</div>
<div>
</div>

我想要两个识别最后一个不是“登录”和“未登录”的div。我将如何通过CSS进行此操作？

Answer 1

如果你想引用第3个div（那不是你要求的那个），试着在你的问题中更清楚一点，修改我的答案。然后正如其他人所说的那样，你需要将三个div包装在parent-div中并使用nth-child或[not]来引用它。在问这个问题之前，你也问过同样的问题（措辞不同）。

第n个孩子

div:nth-child(3) {

}

不

div:not([id]){

}

PS。我没有看到任何理由为什么你不能给最后一个div一个id或类。

Answer 2

这使用了CSS3的:not()选择器。它适用于所有没有id属性的DIV。

＆＃13;

div:not([id]){
  color:green;
}

＆＃13;

<div id="loggedin">
  text
 </div>

<div id="notLoggedIn">
  text
</div>

<div>
  this should come out green
  </div>

＆＃13;

由于评论而出现的另一个例子

由于我们不知道您的HTML是什么样的，因此这可能更适合您的需求。

＆＃13;

.container > div:not([id]) {
  color: green;
}

＆＃13;

<div class="container">
  <div id="loggedin">
    Logged In
  </div>
  <div id="notloggedin">
    Logged Out
  </div>
  <div>
    This text should be green
  </div>
</div>
<div>
  this text should not be green because it isn't a child of the container div.
</div>

＆＃13;

Answer 3

您可以使用三种方式使用CSS定位最后div。

第一种方式：

div:last-child {
    //styles come here
}

第二种方式：

div:nth-child(3) {
    //styles come here
}

第三种方式：

div:not([id]){
    //styles come here
}

使用伪选择器可能还有其他方法。

Answer 4

在你的css中使用:last-child作为div标签。

HTML：

CSS：

div:last-child
{
     //your styles for last div here.
}

通过CSS识别div

4 个答案:

由于评论而出现的另一个例子