Question

将不同背景颜色应用于同一元素的正确方法是什么？示例

 <div id="mainmenumess">
   <p class="incmessage">must be blue</p>
   <p class="incmessage">must be red</p>
 </div>

css

#mainmenumess .incmessage{
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
color: #ffffff;
background: #de2424;
padding: 0px 5px 0px 5px;
text-decoration: none;
cursor:pointer;
}

#mainmenumess .incmessage:hover {
background: #ed4747;
text-decoration: none;
}

如果是红色必须悬停蓝色不要悬停

Answer 1

您使用nth-child。

.incmessage:nth-child(1) { background-color: blue; }
.incmessage:nth-child(1):hover { background-color: red; }

.incmessage:nth-child(2) { background-color: red; }
.incmessage:nth-child(2):hover { background-color: blue; }

尽管如此，我会考虑在元素中添加类，因为这看起来很糟糕。

这不适用于＆lt; = IE8。

Answer 2

所以从它的声音来看，第一个是红色而其他所有都是蓝色的？你想做这样的事情：

#mainmenumess .incmessage:first-child {
    color: red;
}

#mainmenumess .incmessage {
    color: blue;
}

Answer 3

您可以选择第n个孩子或模式

这里我使用了2n模式用于奇数，2n + 1用于平均值

＆＃13;

#mainmenumess .incmessage{
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
color: #ffffff;

padding: 0px 5px 0px 5px;
text-decoration: none;
cursor:pointer;
}

#mainmenumess .incmessage:hover {
background: #ed4747;
text-decoration: none;
}
#mainmenumess .incmessage:nth-child(2n) { background-color: blue; }
#mainmenumess .incmessage:nth-child(2n+1) { background-color: red; }

#mainmenumess .incmessage:nth-child(2n):hover { background-color: red; }
#mainmenumess .incmessage:nth-child(2n+1):hover { background-color: blue; }

＆＃13;

<div id="mainmenumess">
  <p class="incmessage">must be blue</p>
  <p class="incmessage">must be red</p>
  <p class="incmessage">must be red</p>
  <p class="incmessage">must be red</p>
</div>

＆＃13;

Answer 4

没有＆＃34;正确＆＃34;有很多方法。取决于您必须支持哪些浏览器，<p>内只有两个<div>元素，或者还有更多...... {/ p>

这是一个 - ＆gt; http://jsfiddle.net/0p3mxqgx/

 <div id="mainmenumess">
     <p class="incmessage">must be blue</p>
     <p class="incmessage">must be red</p>
</div>

#mainmenumess .incmessage {
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
    color: #ffffff;
    background: #de2424;
    padding: 0px 5px 0px 5px;
    text-decoration: none;
    cursor:pointer;
}
#mainmenumess .incmessage:first-child {
    background:blue;
}
#mainmenumess .incmessage:hover {
    background:blue;
    text-decoration: none;
}
#mainmenumess .incmessage:first-child:hover {
    background:red;
}

这是另一个：使用odd和even - ＆gt; http://jsfiddle.net/0p3mxqgx/1/

#mainmenumess .incmessage {
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
    color: #ffffff;
    background: #de2424;
    padding: 0px 5px 0px 5px;
    text-decoration: none;
    cursor:pointer;
}
#mainmenumess .incmessage:nth-child(odd) {
    background:blue;
}
#mainmenumess .incmessage:nth-child(even):hover {
    background:blue;
    text-decoration: none;
}
#mainmenumess .incmessage:nth-child(odd):hover {
    background:red;
}

相同的元素在css中有不同的颜色

4 个答案: