CSS селектор брат в div [дубликат]

Это сложно. Вы должны указать, используете ли вы приложение или токены пользователя и количество пользователей, которых вы извлекаете для followers_ids.

В случае токена приложения вы получаете всего 15 вызовов за 15 минут. Вы можете получить максимум 5000 подписчиков за звонок. Это дает вам максимум 75 тыс. Последователей в течение 15 минут. Если у кого-то из пользователей, которых вы выберете followers_ids for, есть более 75 тыс. Последователей, вы сразу получите ошибку rate_limit. Если вы загружаете более одного пользователя, вам нужно будет создать сильную обработку rate_limit в своем коде со сном и быть очень терпеливым.

То же самое относится к friends_ids.

Мне не приходилось иметь дело с получением более 75 тыс. Последователей / друзей для данного пользователя, но подумайте об этом, я не знаю, возможно ли это еще больше.

2
задан Azzo 20 March 2019 в 08:14
поделиться

4 ответа

Вы можете контролировать дочерний элемент, используя родительский элемент в большинстве случаев. Я поменял box и me,you классы. Я надеюсь, что это решение будет полезным.

.me,
.you {
    display: inline-block;
    width: 100%;
}
.me .box {
    float: right;
}
.you .box {
    float: left;
    background-color: #d8dbdf;
    color: #444;
}
.box {
    max-width: 60%;
    border-radius: 30px;
    background-color: #0084ff;
    padding: 15px;
    color: #ffffff;
    font-weight: 300;
}
.you + .me .box {
    border-bottom-right-radius: 5px;
}
.me + .me .box {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.me:last-of-type .box {
    border-bottom-right-radius: 30px;
}
<div class="container">
    <div class="conversations">
        <div class="you">
            <div class="box">1 Message</div>
        </div>
        <div class="me">
            <div class="box">2 Message</div>
        </div>
        <div class="me">
            <div class="box">3 Message</div>
        </div>
        <div class="you">
            <div class="box">4 Message</div>
        </div>
        <div class="you">
            <div class="box">5 Message</div>
        </div>
        <div class="me">
            <div class="box">6 Message</div>
        </div>
        <div class="me">
            <div class="box">7 Message</div>
        </div>
        <div class="me">
            <div class="box">8 Message</div>
        </div>
        <div class="me">
            <div class="box">9 Message</div>
        </div>
    </div>
</div>

0
ответ дан Saravana 20 March 2019 в 08:14
поделиться

Селекторы братьев и сестер должны работать на одном уровне дерева DOM. Вы вложили каждый элемент me и you в родительский элемент box, а это значит, что эти правила селектора братьев и сестер никогда не будут работать. Я переместил классы you и me, чтобы разделить класс box (первоначально родитель div).

Чтобы добавить небольшой интервал между группировками you и me, я добавил следующее:

.you + .me,
.me + .you {
  margin-top: 1em;
}

Для доступности и общей семантики HTML я думаю, что структура лучше всего подходит как ul, так как это список сообщений чата. Я не изменил ваш HTML, но вы, вероятно, должны сделать это в конечном итоге.

*{
  box-sizing:border-box;
  position:relative; 
}
.container {
  width:100%;
  max-width:400px;
  margin:0px auto;
  padding:15px;
  background-color:#fafafa;
  border-radius:3px;
  margin-top:50px;
  border:1px solid #f5f5f5;
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}
.conversations {
  display:inline-block;
  width:100%;
  padding:50px 0px;
}
.box {
  width:100%;
  padding:1px 0px;
  display:inline-block; 
  font-size:14px;
  font-weight:400;
}
.you {
  max-width:60%;
  border-radius:30px;
  background-color:#d8dbdf;
  padding:15px;
  float:left;  
}
.me {
  max-width:60%;
  border-radius:30px;
  background-color:#0084ff;
  padding:15px;
  float:right;
  color:#ffffff; 
  font-weight:300;
}

.you + .me{
  border-bottom-right-radius: 5px;
}

.you + .me,
.me + .you{
  margin-top: 1em;
}

.me + .me{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.box.me:last-of-type {
  border-bottom-right-radius: 30px;
}
<div class="container">
  <div class="conversations">
    <div class="box you">1 Message</div>
    <div class="box me">2 Message</div>
    <div class="box me">3 Message</div>
    <div class="box you">4 Message</div>
    <div class="box you">5 Message</div>
    <div class="box me">6 Message</div>
    <div class="box me">6 Message</div>
  </div>
</div>

0
ответ дан Andy Hoffman 20 March 2019 в 08:14
поделиться

В вашем примере проблема заключается в .box -контейнере. В этом случае нельзя использовать селекторный переключатель или :last-of-type. Причина в том, что .me -контейнер не является заилкой другого .me -контейнера. Это будет двоюродный брат. К сожалению, нет выбора двоюродного брата. ;)

0
ответ дан Freddy Ochner 20 March 2019 в 08:14
поделиться

Как и другие, проблема заключалась в контейнере .box. Просто отредактируйте ваш селектор на это

.box:last-of-type > .me {
   border-bottom-right-radius: 30px;
} 
0
ответ дан Francis ask question 20 March 2019 в 08:14
поделиться