Это сложно. Вы должны указать, используете ли вы приложение или токены пользователя и количество пользователей, которых вы извлекаете для followers_ids.
В случае токена приложения вы получаете всего 15 вызовов за 15 минут. Вы можете получить максимум 5000 подписчиков за звонок. Это дает вам максимум 75 тыс. Последователей в течение 15 минут. Если у кого-то из пользователей, которых вы выберете followers_ids for, есть более 75 тыс. Последователей, вы сразу получите ошибку rate_limit. Если вы загружаете более одного пользователя, вам нужно будет создать сильную обработку rate_limit в своем коде со сном и быть очень терпеливым.
То же самое относится к friends_ids.
Мне не приходилось иметь дело с получением более 75 тыс. Последователей / друзей для данного пользователя, но подумайте об этом, я не знаю, возможно ли это еще больше.
Вы можете контролировать дочерний элемент, используя родительский элемент в большинстве случаев. Я поменял 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>
Селекторы братьев и сестер должны работать на одном уровне дерева 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>
В вашем примере проблема заключается в .box
-контейнере. В этом случае нельзя использовать селекторный переключатель или :last-of-type
. Причина в том, что .me
-контейнер не является заилкой другого .me
-контейнера. Это будет двоюродный брат. К сожалению, нет выбора двоюродного брата. ;)
Как и другие, проблема заключалась в контейнере .box. Просто отредактируйте ваш селектор на это
.box:last-of-type > .me {
border-bottom-right-radius: 30px;
}