Изменить цвет фона альтернативных элементов CSS

html css css-selectors css-float

1931 просмотра

3 ответа

Я хочу изменить цвет альтернативных элементов, но мой код не работает. Мой код меняет цвет всего элемента контейнера.

Может кто-нибудь сказать мне, где я делаю ошибку в коде?

.pvt-msg-panel {
  height: 92vh;
  float: left;
  margin-top: -20px;
}
#pvt-messages-box {
  height: 50vh;
  width: 650px;
  margin-top: 10px;
  margin-left: 10px;
  overflow-y: scroll;
}
.pvt-messages-box-item {
  padding: 10px;
  padding-left: 20px;
  position: relative;
  display: inline-block;
  width: 100%;
  color: black;
  padding-left: 20px;
  font-size: 12px;
  cursor: pointer;
}
.pvt-messages-box-item:nth-child(odd) {
  background-color: green;
}
.pvt-messages-box-item:nth-child(even) {
  background-color: white;
}
<div class="pvt-msg-panel">
  <section id="pvt-messages-box">
    <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 1</span>
    <br>
    <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 2</span>
    <br>
    <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 3</span>
    <br>
  </section>
</div>

Автор: Krisalay Источник Размещён: 08.11.2019 11:07

Ответы (3)


8 плюса

Решение

При использовании first-childселектора brтеги будут пытаться подобрать evenселектор. Попробуйте использовать nth-of-typeселектор, и вот вы:

.pvt-msg-panel{
  height: 92vh;
  float: left;
  margin-top: -20px;
}
#pvt-messages-box{
  height: 50vh;
  width: 650px;
  margin-top: 10px;
  margin-left: 10px;
  overflow-y: scroll;
}
.pvt-messages-box-item{
  padding:10px;
  padding-left: 20px;
  position: relative;
  display: inline-block;
  width: 100%;
  color: black;
  padding-left: 20px;
  font-size: 12px;
  cursor: pointer;
}

.pvt-messages-box-item:nth-of-type(odd){
  background-color: green;
}
.pvt-messages-box-item:nth-of-type(even){
  background-color: white;
}
<div class="pvt-msg-panel">
    <section id="pvt-messages-box">
        <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 1</span><br>
        <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 2</span><br>
        <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 3</span><br>
    </section>
</div>

Автор: kukkuz Размещён: 20.08.2016 09:43

3 плюса

здесь у вас есть jsfiddle . использовать nth-of-type(odd)дляspan

.pvt-messages-box-item:nth-of-type(odd){
  background-color: green;
}

.pvt-messages-box-item:nth-of-type(even){
  background-color: white;
}

: nth-child соответствует, если элемент является указанным дочерним элементом своего родителя.
Элемент внутри DIV вызывает странную и даже часть ваших селекторов на неудачу , так как это делает и пролеты нечетных детей (1 - й и 3 - й) его родителей.

Автор: Edison Biba Размещён: 20.08.2016 09:42

2 плюса

ОК, я нашел вашу проблему.

Сначала я копирую твой код в мой реактивный мозг и выглядит так.

код выглядит

Если я изменю такой код:

background-color: red;

и фон становится полностью красным. Итак, проблема здесь, почему?

Во-первых, первый дочерний элемент раздела - это не span.pvt-message-box-item: nth-child (1), а пробел, а второй - такой элемент. Третий - тот же, который также является пробелом между первым элементом span и вторым элементом, теперь, если вы хотите изменить цвет фона в качестве альтернативы, вы должны использовать это доброе разрешение. Измените css на нечетное и четное с фактическим числом, например, заменив нечетное и четное на 1/3/5, и результат будет в порядке с вашим запросом:

удовлетворить результат

Автор: Crabime Размещён: 20.08.2016 10:19
Вопросы из категории :
32x32