(下面的代码)
我对这两种语言都不太熟悉,但我能够在谷歌中检查 html 元素以查明我希望使用的内容:
<span data-provider="twitch" data-badge="subscriber" data-version="3012" class="ffz-tooltip ffz-badge" data-tooltip-type="badge" data-badge-idx="1"></span>
来自
<span class="chat-line__message--badges"><span data-provider="twitch" data-badge="broadcaster" data-version="1" class="ffz-tooltip ffz-badge" data-tooltip-type="badge" data-badge-idx="0"></span><span data-provider="twitch" data-badge="subscriber" data-version="3012" class="ffz-tooltip ffz-badge" data-tooltip-type="badge" data-badge-idx="1"></span><span data-provider="twitch" data-badge="no_video" data-version="1" class="ffz-tooltip ffz-badge" data-tooltip-type="badge" data-badge-idx="2"></span></span>
我下面的当前代码,但是拉取所有徽章而不是我特别需要的徽章(订阅者徽章)导致以下聊天框:
如果我问错了这个问题,我深表歉意,因为我通常是 css 和 html 的新手。但如果需要,我可以澄清任何事情。 代码如下:
(错误)我最终得到了这个:
(目标)但我想要这个:
html:
<!-- item will be appened to this layout -->
<div id="log" class="sl__chat__layout">
</div>
<!-- chat item -->
<script type="text/template" id="chatlist_item">
<div data-from="{from}" data-id="{messageId}">
<span class="meta" style="color: {color}">
<span class="badges">
</span>
<span class="name">{from}</span>
</span>
<br>
<span class="message">
{message}
</span>
</div>
</script>
CSS:
@font-face {
font-family: 'final_fantasy_viiregular';
src: url(data:application/font-woff2;charset=utf-**"VERY LONG FONT CSS IMPORT REMOVED FOR CLARITY"**;
font-weight: normal;
font-style: normal;
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
text-shadow: 7px 7px #000;
background: {background_color};
font-family: 'final_fantasy_viiregular';
font-weight: 600;
font-size: 100px;
line-height: .5em;
color: {text_color};
}
#log>div {
animation: fadeInUp .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
-webkit-animation: fadeInUp .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
}
.colon {
display: none;
}
#log {
display: block;
position: absolute;
bottom: 0;
left: 0;
padding: 0 10px 10px;
width: 100%;
}
#log .emote {
display: inline-block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
padding: 0em 0.2em;
position: relative;
}
#log .emote img {
height: 1em;
opacity: 0;
}
#log .message,#log .meta {
vertical-align: top;
display: inline;
padding-bottom: 0.1em;
}
#log .meta {
text-align: left;
padding-right: 0.5em;
}
#log .message {
word-wrap: break-word;
}
.badge {
height: 1em;
text-shadow: 7px 7px #000;
background: {background_color};
}
.name {
height: 2em;
color: cyan;
text-shadow: 10px 10px #000;
}