Question

我需要为特定的div编写css 我的div包含相同的名称类

<div class="main">

   <div class="banner_image"> banner 1</div>
   <div class="banner_image ">banner 2</div>
   <div class="banner_image ">banner 3</div>
</div>

我需要为整个div写不同的CSS 喜欢选择之后......

如何在同一个类上为不同的div编写css

Answer 1

您可能正在寻找类似:nth-child()的内容。例如，要选择同一类的第二个div：

<强> CSS

.main div.banner_image:nth-child(2) {
    background-color: #ff0000;
}

JSFIDDLE

上的示例

Answer 2

更新了小提琴

http://jsfiddle.net/zxm3wgj2/2/

<div class="main">
    <div class="banner_image">banner 1</div>
    <div class="banner_image ">banner 2</div>
    <div class="banner_image ">banner 3</div>
</div>

尝试

   nth-child(2) // to select in between element

    first-child // to select first element

    last-child // to select last element

CSS

.banner_image:nth-child(2) {
    background-color: #ff0000;
    color:white;
}
.banner_image:first-child {
    background-color: yellow;
}
.banner_image:last-child {
    background-color: blue;
    color:white;
}
.banner_image{
    padding:10px;
}

Answer 3

您可以将id和class同时分配给div ，因此在class css中，您只能编写与该类有关的内容。在id css中，你只编写了你想要用特定div发生的东西。

<div class="main">
   <div id="banner1" class="banner_image"> banner 1</div>
   <div id="banner2" class="banner_image">banner 2</div>
   <div id="banner3" class="banner_image">banner 3</div>
</div>

您还可以使用多个类，如：

<强> HTML

<div class="main">
   <div id="banner1" class="banner_image small">banner 1</div>
   <div id="banner2" class="banner_image big">banner 2</div>
   <div id="banner3" class="banner_image">banner 3</div>
</div>

<强> CSS

.small {
    font-size:10px;
}
.big {
    font-size:20px;
}

我希望这能为你解决问题。快乐的编码！

如何为之前的特定div选择编写css

3 个答案: