Question

我有三个div，它们分配了相同的类。我想要做的是对第一个div应用一个单独的样式，而对另外两个不同。

   <div class="news_post">...</div>
<div class="news_post">...</div>
<div class="news_post">...</div>

关于什么是正确的方法的任何建议？

Answer 1

Working DEMO

.news_post:first-child {
  background: red;
}

.news_post {
  background: green;
}

如果您想在以后定制任何元素

.news_post:nth-child(2) { // 2 represents the position
  background: blue;
}

Answer 2

你可以试试这个：

.news_post:nth-child(1)
{
   background:#ff0000;
}

.news_post:nth-child(2)
{
   background:blue;
}

.news_post:nth-child(3)
{
   background:black;
}

Answer 3

您可以使用Pseudo Element Selectors。

:nth-child()

:first-child

:last-child

如果您只想在First Div上应用不同的样式，请尝试以下方法：

.news_post{
    background-color:black;
    height:20px;
    width:200px;
}
.news_post:first-child
{
    background-color:red;
}

Working Demo

如果你想在所有三个div上应用不同的风格，试试这个：

.news_post{
    height:20px;
    width:200px;
}
.news_post:nth-child(1)
{
   background-color:red;
}

.news_post:nth-child(2)
{
   background-color:green;
}

.news_post:nth-child(3)
{
   background-color:black;
}

Working Demo

Answer 4

尝试伪类。

.news_post:first-child
.news_post:last-child

More about css中的伪类

将样式添加到特定类

4 个答案: