合并 CSS 选择器中的元素
Merging elements in a CSS selector
我已经有一个 CSS/HTML 模型，它看起来像 WhatsApp 消息传递，但仅适用于 2 人之间的对话。我想添加群聊功能，也就是名字。
它基于 <dl> 列表，所以 HTML 看起来像这样：
.whatsapp {
width: 100%;
max-width: 320px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
display: table;
margin: auto;
background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/WhatsApp/images/WhatsApp_background.png");
background-repeat: repeat-y;
background-size: 100%;
}
.whatsapp dt {
display: none;
}
.whatsapp dd {
max-width: 65%;
clear: both;
position: relative;
color: #000000;
border-radius: 5px;
padding: 5px;
margin: 1px 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
z-index: 1;
}
.whatsapp dd:after {
content: attr(time);
font-size: 0.75em;
color: #999;
text-transform: uppercase;
display: inline-block;
float: right;
line-height: 1.3em;
padding-top: 0.5em;
padding-left: 1.5em;
margin: 0;
}
.whatsapp dd:last-child {
margin-bottom: 10px;
}
.whatsapp dd:last-child:before {
content: "";
position: absolute;
width: 25px;
height: 14px;
bottom: 5px;
border-top: 9px solid;
border-radius: 20px;
z-index: -1;
}
/*
* Outgoing texts
*/
.whatsapp .out dd {
float: right;
background: #DCF8C6;
}
.whatsapp .out dd:last-child:before {
border-color: #DCF8C6;
transform: rotate(240deg);
right: -16px;
}
/*
* Incoming texts
*/
.whatsapp .in dd {
float: left;
background: #FFFFFF;
}
.whatsapp .in dd:last-child:before {
border-color: #FFFFFF;
transform: rotate(-240deg);
left: -16px;
}
/*
* Timestamps
*/
.whatsapp .day,
.whatsapp dd sub {
font-family: inherit;
font-size: 0.75em;
color: #999;
text-transform: uppercase;
}
.whatsapp .day {
width: 100px;
background: #D4EAF4;
border-radius: 5px;
padding: 5px;
margin: 10px auto;
text-align: center;
display: table;
}
.whatsapp dd sub {
display: inline-block;
float: right;
line-height: 1.3em;
padding-top: 0.5em;
padding-left: 1.5em;
margin: 0;
}
/* checkmarks */
.whatsapp .out dd sub:after {
content: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/WhatsApp/images/Checkmark_read.png");
margin-left: 3px;
}
.whatsapp .out dd sub.received:after {
content: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/WhatsApp/images/Checkmark_received.png");
}
.whatsapp .out dd sub.notreceived:after {
content: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/WhatsApp/images/Checkmark_no-received.png");
}
/*
* Big emojis
*/
.whatsapp dd.emoji1 {
font-size: 2.5em;
}
.whatsapp dd.emoji2 {
font-size: 2em;
}
.whatsapp dd.emoji3 {
font-size: 1.5em;
}
.whatsapp dd.emoji1 sub,
.whatsapp dd.emoji2 sub,
.whatsapp dd.emoji3 sub {
display: block;
float: none;
text-align: right;
padding: 0 !important;
}
.whatsapp dd.emoji1 sub {
font-size: 0.3em;
}
.whatsapp dd.emoji2 sub {
font-size: 0.375em;
}
.whatsapp dd.emoji3 sub {
font-size: 0.5em;
}
/*
* Pictures
*/
.whatsapp .pic {
padding: 3px;
}
.whatsapp .pic img {
border-radius: 3px;
width: 100%;
display: block;
}
/* Timestamp white and in image corner */
.whatsapp .pic.solo sub {
color: #ffffff;
position: absolute;
bottom: 2px;
right: 5px;
}
/*
* Contact header
*/
.whatsapp .contact {
position: relative;
background: #075E54;
margin: 0;
padding: 10px;
font-family: inherit;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
text-transform: capitalize;
text-align: left;
}
/* avatar circle */
.whatsapp .contact:before {
content: "";
float: left;
width: 35px;
height: 35px;
background-image: url("https://t3.ftcdn.net/jpg/00/64/67/80/240_F_64678017_zUpiZFjj04cnLri7oADnyMH0XBYyQghG.jpg");
background-size: 100%;
border-radius: 100%;
margin-right: 10px;
}
/* Online status */
.whatsapp .contact.online:after {
content: "Online";
display: block;
padding-top: 5px;
font-size: 13px;
font-weight: normal;
}
/*
* Group chat
*/
.whatsapp.grouptext .in dt {
display: table !important;
clear: both;
font-weight: bold;
padding-left: 15px;
}
.whatsapp.grouptext .in.p1 dt {
color: #e54c51;
}
.whatsapp.grouptext .in.p2 dt {
color: #ee7d37;
}
.whatsapp.grouptext .in.p3 dt {
color: #dfa64f;
}
.whatsapp.grouptext .in.p4 dt {
color: #58b042;
}
.whatsapp.grouptext .in.p5 dt {
color: #58bfe8;
}
.whatsapp.grouptext .in.p6 dt {
color: #367cdc;
}
.whatsapp.grouptext .in.p7 dt {
color: #6f4bf5;
}
.whatsapp.grouptext .in.p8 dt {
color: #ec68a1;
}
<dl class="whatsapp grouptext">
<div class="out">
<dt>Ciri</dt>
<dd time="2:01 PM">Who's picking me up today?</dd>
</div>
<div class="in p1">
<dt>Yennefer</dt>
<dd>its tuesday</dd>
<dd>so jaskier</dd>
</div>
<div class="in p2">
<dt>Jasker</dt>
<dd>no its geralts turn</dd>
<dd>i swear its his turn</dd>
</div>
<div class="in p3">
<dt>Geralt</dt>
<dd>no, Yen is right: it's your turn</dd>
<dd>it's tuesday</dd>
<dd>Tuesday is always your turn</dd>
</div>
</dl>
<hr>
<dl class="whatsapp">
<h1 class="contact online">Mabel</h1>
<h4 class="day">Today</h4>
<div class="out">
<dt>Dipper</dt>
<dd>How's babysitting for Soos and Melody going?<sub>11:49 AM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>So I made chicken nuggets for lunch<sub>1:07 PM</sub>
</dd>
<dd>And you remember how much we used to love chicken nuggets!!!!! but when I tried one now it was just kind of bland and gross<sub>1:07 PM</sub>
</dd>
<dd>How sad is that??!<sub>1:07 PM</sub>
</dd>
<dd>I feel like an adult and I hate it<sub>1:07 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>Does it help if I say texting me to lament about chicken nuggets is super un-adult?<sub>1:08 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>maybe a little<sub>1:08 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>I bet we could make good chicken nuggets at home if we tried<sub>1:08 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd class="emoji1"><sub>1:08 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>I mean it's just bite-sized breaded chicken, right? You still like chicken and bread<sub>1:09 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>loving this can-do spirit brobro<sub>1:09 PM</sub>
</dd>
<dd>Also it makes you sound like antoni on queer eye<sub>1:09 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>Making An Effort <sub>1:10 PM</sub>
</dd>
<dd>and making chicken nuggets<sub>1:10 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>:swoon:<sub>1:10 PM</sub>
</dd>
<dd>Oooooh can we make them dinasour shaped<sub>1:11 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>I think the reason they can make the store bought ones shaped is because they're not actually made out of chicken, they're made out of paste<sub>1:11 PM</sub>
</dd>
<dd>wait<sub>1:11 PM</sub>
</dd>
<dd>Shit did I just destroy our childhood?<sub>1:11 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>No<sub>1:11 PM</sub>
</dd>
<dd>Maybe a little<sub>1:12 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>We could take real chicken and grind it up??<sub>1:13 PM</sub>
</dd>
<dd>It works for hamburgers. Mix in onion and stuff<sub>1:13 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>I can't decide if onion would be good, or if it would be sacrilegious to the spirit of chicken nuggets<sub>1:13 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>If they have onion but are dinosaur shaped, would that be a fair trade?<sub>1:14 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>yes<sub>1:14 PM</sub>
</dd>
<dd class="emoji2"><sub>1:14 PM</sub>
</dd>
<dd>ALL THE SHAPES!!<sub>1:14 PM</sub>
</dd>
<dd class="emoji3"><sub>1:14 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>That seems ambitious<sub>1:14 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>Bread on the outside! Bread on the inside!<sub>1:15 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>If the bread was on the inside the chicken would dry out<sub>1:15 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>beef jerky is good<sub>1:15 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>Fair poin<sub>1:16 PM</sub>t</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>CHICKEN NUGGET CINNAMON ROLLS!!!<sub>1:16 PM</sub>
</dd>
<dd>bread on the inside AND the outside<sub>1:16 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>To what ends?<sub>1:16 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>Defying chicken-bread roles<sub>1:17 PM</sub>
</dd>
<dd>why does the bread always have to be on the outside, shielding the chicken from the drying heat of the oven?? Doesn't bread deserve to be protected sometimes too<sub>1:17 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>Can't argue with that<sub>1:17 PM</sub>
</dd>
<dd>Wait so were you actually serious about making chicken nuggets?? I'm at the store now, should I buy some chicken?<sub>3:47 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>yes get chicken<sub>4:11 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>Mabel we've talked about this<sub>4:12 PM</sub>
</dd>
<dd>When I say "I'm at the store NOW" you can't reply half an hour later still asking for stuff<sub>4:12 PM</sub>
</dd>
<dd>but yeah I got chicken<sub>4:16 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd class="emoji1"><sub>4:16 PM</sub>
</dd>
</div>
</dl>
查看CodePen
在 WhatsApp 群聊中，该名称显示为该人发送的一系列文本的第一行。
我想要的：
一开始我只是试了这个，做一些space，然后把名字翻译到位。
.whatsapp.grouptext .incoming dt+dd {
padding-top: 1.5em;
}
但是，如果有人只是说 "no" 或其他内容，那么文本气泡就那么窄，并且它的宽度不足以容纳名称。名称和文本的长度都可以不同，我真的不想硬编码为固定像素大小或其他东西。
我真正想要的是将两者合并为一个元素，或者将<dt>的内容变成<dd>的:before。有什么办法吗？
（是的，我 可以 将前两个包裹在 <div> 或其他任何东西中。但是还有其他方法吗？？）
据我了解，
您需要全名 + 文本才能在一个气泡中显示。
为此，您可以为 .in 和 .out div 提供背景和样式。指向箭头也是如此。
你需要有一些宽度，所以气泡有一些宽度。
为此删除给 dd.
其余的你可以使用边距和填充来修复。
将 <div> 更改为 <ul>，并将每条短信更改为 <li>。每个<li>有：
默认值指定为 CSS variables [1]
--variableName: value
...
property: var(--variableName);
Pseudo-element ::before and content: attr() property and value分别用于组名[2],用户名[4]，和时间戳 [5]
<tagName attributeName="attributeValue">Text content</tagName>
selector::before { content: '#'attr(attributeName)': ';...
/* Result as Rendered HTML
#attributeValue: Text content
*/
各种background properties用于头像图像[3].
自定义样式已分配给特定 #id [6].
演示
注意： 为显示演示提供的初始 iframe 未呈现任何实际尺寸。要正确查看演示，请单击右侧的 Full page link。
/* [1] Defaults */
:root {
/* Default avatar */
--img: url(https://i.ibb.co/Br95K5G/wa0000000.png);
/* Default background colors */
--grn: rgba(12, 128, 8, 0.6);
--lav: rgba(8, 12, 128, 0.6);
}
:root,
body {
width: 100%;
height: 100%;
padding: 0;
font: 700 3vw/1.45 Arial;
overflow-y: hidden;
}
main {
position: relative;
height: 90vh;
margin: 0 auto;
overflow-y: scroll;
}
header {
position: fixed;
top: 0;
width: 100%;
height: 15%;
padding-bottom: 0;
border-bottom: 5px ridge #000;
background-color: #fff;
}
h1 {
margin: 0 0 8px 0;
padding-bottom: 15px;
}
h1::before {
/* [2] Group name */
content: attr(data-group);
font-size: 1.5rem;
font-variant: small-caps;
letter-spacing: 0.2rem;
}
.text {
padding: 4rem 0;
}
li {
margin: 0 0 0.5rem 0;
padding: 1.25rem 1.25rem 1.25rem 3.75rem;
border: 0;
border-radius: 8px;
/* [3] Avatar */
list-style: none;
background-image: var(--img);
background-repeat: no-repeat;
background-position: 0.5rem center;
background-size: 2.5rem;
}
li::before {
/* [4] User name */
content: attr(data-user)': ';
border: 0;
border-radius: 5px;
margin: 0 5px 0 -5px;
padding: 4px 0 2px 10px
}
.outgoing li,
.incoming li::before {
background-color: var(--grn)
}
.incoming li,
.outgoing li::before {
background-color: var(--lav)
}
time {
display: block;
margin-left: 75%;
margin-bottom:-15px;
}
time::before {
/* [5] Timestamp */
content: attr(datetime);
}
/* [6] Custom styles by user #id */
#wa2813224 {
background-image: url(https://i.ibb.co/Hdyh0V0/wa2813224.png);
background-color: #000;
color: gold
}
#wa1248791 {
background-image: url(https://i.ibb.co/d6bK0fZ/wa12248791.png)
}
footer {
position: fixed;
bottom: 0;
padding-top: 0;
width: 100%;
border-top: 5px ridge #000;
background-color: #000;
}
#ui * {
font: inherit
}
fieldset {
display: flex;
justify-content: center;
padding: 0;
border: 0;
background-color: #000;
}
#message {
width: 80vw;
min-height: 100%;
padding: 3px 5px;
border-top: 5px inset #333;
border-bottom: 5px inset #333;
border-left: 5px inset #333;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
resize: vertical;
}
#send {
min-height: 100%;
background-color: var(--lav);
font-size: 1.25rem;
font-variant: small-caps;
color: #fff;
border: 0;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
cursor: pointer;
}
@media only screen and (max-width: 600px) {
:root,
body {
font: 700 4vw/1.45 Arial;
}
header {
height: max-content
}
h1 {
margin: -8px 0;
}
time {
margin-left: 65%;
}
#send {
width: 10%;
padding: 1px 3.5%;
font-size: 0.75rem;
text-transform: uppercase;
line-height: 1;
word-break: break-word;
}
}
<main class='whatsapp group'>
<header>
<h1 data-group='Carpool'></h1>
</header>
<section class="text">
<ul class="outgoing">
<li id='wa1275966' data-user='Ciri'>Who's picking me up today?<time datetime='10:21 PM'></time></li>
</ul>
<hr>
<ul class="incoming">
<li id='wa0000000' data-user='default'>Hello world!<time datetime='10:26 PM'></time></li>
<li id='wa2813224' data-user='zer00ne'>Not me.<time datetime='10:31 PM'></time></li>
<li id='wa1248791' data-user='Aza Azdaema'>It's Tuesday...it's your turn.<time datetime='10:35 PM'></time></li>
<li id='wa2813224' data-user='zer00ne'>I don't have enough gas.<time datetime='10:45 PM'></time></li>
<li id='wa2813224' data-user='zer00ne'>Plus I'm not scheduled for Tuesdays. In fact I don't even work Tuesdays.<time datetime='10:46 PM'></time></li>
</ul>
</section>
<footer>
<form id='ui'>
<fieldset>
<textarea id='message' rows='1' cols='50'></textarea>
<button id='send' type='submit'>Send</button>
</fieldset>
</form>
</footer>
</main>
我已经有一个 CSS/HTML 模型，它看起来像 WhatsApp 消息传递，但仅适用于 2 人之间的对话。我想添加群聊功能，也就是名字。
它基于 <dl> 列表，所以 HTML 看起来像这样：
.whatsapp {
width: 100%;
max-width: 320px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
display: table;
margin: auto;
background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/WhatsApp/images/WhatsApp_background.png");
background-repeat: repeat-y;
background-size: 100%;
}
.whatsapp dt {
display: none;
}
.whatsapp dd {
max-width: 65%;
clear: both;
position: relative;
color: #000000;
border-radius: 5px;
padding: 5px;
margin: 1px 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
z-index: 1;
}
.whatsapp dd:after {
content: attr(time);
font-size: 0.75em;
color: #999;
text-transform: uppercase;
display: inline-block;
float: right;
line-height: 1.3em;
padding-top: 0.5em;
padding-left: 1.5em;
margin: 0;
}
.whatsapp dd:last-child {
margin-bottom: 10px;
}
.whatsapp dd:last-child:before {
content: "";
position: absolute;
width: 25px;
height: 14px;
bottom: 5px;
border-top: 9px solid;
border-radius: 20px;
z-index: -1;
}
/*
* Outgoing texts
*/
.whatsapp .out dd {
float: right;
background: #DCF8C6;
}
.whatsapp .out dd:last-child:before {
border-color: #DCF8C6;
transform: rotate(240deg);
right: -16px;
}
/*
* Incoming texts
*/
.whatsapp .in dd {
float: left;
background: #FFFFFF;
}
.whatsapp .in dd:last-child:before {
border-color: #FFFFFF;
transform: rotate(-240deg);
left: -16px;
}
/*
* Timestamps
*/
.whatsapp .day,
.whatsapp dd sub {
font-family: inherit;
font-size: 0.75em;
color: #999;
text-transform: uppercase;
}
.whatsapp .day {
width: 100px;
background: #D4EAF4;
border-radius: 5px;
padding: 5px;
margin: 10px auto;
text-align: center;
display: table;
}
.whatsapp dd sub {
display: inline-block;
float: right;
line-height: 1.3em;
padding-top: 0.5em;
padding-left: 1.5em;
margin: 0;
}
/* checkmarks */
.whatsapp .out dd sub:after {
content: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/WhatsApp/images/Checkmark_read.png");
margin-left: 3px;
}
.whatsapp .out dd sub.received:after {
content: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/WhatsApp/images/Checkmark_received.png");
}
.whatsapp .out dd sub.notreceived:after {
content: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/WhatsApp/images/Checkmark_no-received.png");
}
/*
* Big emojis
*/
.whatsapp dd.emoji1 {
font-size: 2.5em;
}
.whatsapp dd.emoji2 {
font-size: 2em;
}
.whatsapp dd.emoji3 {
font-size: 1.5em;
}
.whatsapp dd.emoji1 sub,
.whatsapp dd.emoji2 sub,
.whatsapp dd.emoji3 sub {
display: block;
float: none;
text-align: right;
padding: 0 !important;
}
.whatsapp dd.emoji1 sub {
font-size: 0.3em;
}
.whatsapp dd.emoji2 sub {
font-size: 0.375em;
}
.whatsapp dd.emoji3 sub {
font-size: 0.5em;
}
/*
* Pictures
*/
.whatsapp .pic {
padding: 3px;
}
.whatsapp .pic img {
border-radius: 3px;
width: 100%;
display: block;
}
/* Timestamp white and in image corner */
.whatsapp .pic.solo sub {
color: #ffffff;
position: absolute;
bottom: 2px;
right: 5px;
}
/*
* Contact header
*/
.whatsapp .contact {
position: relative;
background: #075E54;
margin: 0;
padding: 10px;
font-family: inherit;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
text-transform: capitalize;
text-align: left;
}
/* avatar circle */
.whatsapp .contact:before {
content: "";
float: left;
width: 35px;
height: 35px;
background-image: url("https://t3.ftcdn.net/jpg/00/64/67/80/240_F_64678017_zUpiZFjj04cnLri7oADnyMH0XBYyQghG.jpg");
background-size: 100%;
border-radius: 100%;
margin-right: 10px;
}
/* Online status */
.whatsapp .contact.online:after {
content: "Online";
display: block;
padding-top: 5px;
font-size: 13px;
font-weight: normal;
}
/*
* Group chat
*/
.whatsapp.grouptext .in dt {
display: table !important;
clear: both;
font-weight: bold;
padding-left: 15px;
}
.whatsapp.grouptext .in.p1 dt {
color: #e54c51;
}
.whatsapp.grouptext .in.p2 dt {
color: #ee7d37;
}
.whatsapp.grouptext .in.p3 dt {
color: #dfa64f;
}
.whatsapp.grouptext .in.p4 dt {
color: #58b042;
}
.whatsapp.grouptext .in.p5 dt {
color: #58bfe8;
}
.whatsapp.grouptext .in.p6 dt {
color: #367cdc;
}
.whatsapp.grouptext .in.p7 dt {
color: #6f4bf5;
}
.whatsapp.grouptext .in.p8 dt {
color: #ec68a1;
}
<dl class="whatsapp grouptext">
<div class="out">
<dt>Ciri</dt>
<dd time="2:01 PM">Who's picking me up today?</dd>
</div>
<div class="in p1">
<dt>Yennefer</dt>
<dd>its tuesday</dd>
<dd>so jaskier</dd>
</div>
<div class="in p2">
<dt>Jasker</dt>
<dd>no its geralts turn</dd>
<dd>i swear its his turn</dd>
</div>
<div class="in p3">
<dt>Geralt</dt>
<dd>no, Yen is right: it's your turn</dd>
<dd>it's tuesday</dd>
<dd>Tuesday is always your turn</dd>
</div>
</dl>
<hr>
<dl class="whatsapp">
<h1 class="contact online">Mabel</h1>
<h4 class="day">Today</h4>
<div class="out">
<dt>Dipper</dt>
<dd>How's babysitting for Soos and Melody going?<sub>11:49 AM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>So I made chicken nuggets for lunch<sub>1:07 PM</sub>
</dd>
<dd>And you remember how much we used to love chicken nuggets!!!!! but when I tried one now it was just kind of bland and gross<sub>1:07 PM</sub>
</dd>
<dd>How sad is that??!<sub>1:07 PM</sub>
</dd>
<dd>I feel like an adult and I hate it<sub>1:07 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>Does it help if I say texting me to lament about chicken nuggets is super un-adult?<sub>1:08 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>maybe a little<sub>1:08 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>I bet we could make good chicken nuggets at home if we tried<sub>1:08 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd class="emoji1"><sub>1:08 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>I mean it's just bite-sized breaded chicken, right? You still like chicken and bread<sub>1:09 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>loving this can-do spirit brobro<sub>1:09 PM</sub>
</dd>
<dd>Also it makes you sound like antoni on queer eye<sub>1:09 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>Making An Effort <sub>1:10 PM</sub>
</dd>
<dd>and making chicken nuggets<sub>1:10 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>:swoon:<sub>1:10 PM</sub>
</dd>
<dd>Oooooh can we make them dinasour shaped<sub>1:11 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>I think the reason they can make the store bought ones shaped is because they're not actually made out of chicken, they're made out of paste<sub>1:11 PM</sub>
</dd>
<dd>wait<sub>1:11 PM</sub>
</dd>
<dd>Shit did I just destroy our childhood?<sub>1:11 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>No<sub>1:11 PM</sub>
</dd>
<dd>Maybe a little<sub>1:12 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>We could take real chicken and grind it up??<sub>1:13 PM</sub>
</dd>
<dd>It works for hamburgers. Mix in onion and stuff<sub>1:13 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>I can't decide if onion would be good, or if it would be sacrilegious to the spirit of chicken nuggets<sub>1:13 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>If they have onion but are dinosaur shaped, would that be a fair trade?<sub>1:14 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>yes<sub>1:14 PM</sub>
</dd>
<dd class="emoji2"><sub>1:14 PM</sub>
</dd>
<dd>ALL THE SHAPES!!<sub>1:14 PM</sub>
</dd>
<dd class="emoji3"><sub>1:14 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>That seems ambitious<sub>1:14 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>Bread on the outside! Bread on the inside!<sub>1:15 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>If the bread was on the inside the chicken would dry out<sub>1:15 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>beef jerky is good<sub>1:15 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>Fair poin<sub>1:16 PM</sub>t</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>CHICKEN NUGGET CINNAMON ROLLS!!!<sub>1:16 PM</sub>
</dd>
<dd>bread on the inside AND the outside<sub>1:16 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>To what ends?<sub>1:16 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>Defying chicken-bread roles<sub>1:17 PM</sub>
</dd>
<dd>why does the bread always have to be on the outside, shielding the chicken from the drying heat of the oven?? Doesn't bread deserve to be protected sometimes too<sub>1:17 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>Can't argue with that<sub>1:17 PM</sub>
</dd>
<dd>Wait so were you actually serious about making chicken nuggets?? I'm at the store now, should I buy some chicken?<sub>3:47 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd>yes get chicken<sub>4:11 PM</sub>
</dd>
</div>
<div class="out">
<dt>Dipper</dt>
<dd>Mabel we've talked about this<sub>4:12 PM</sub>
</dd>
<dd>When I say "I'm at the store NOW" you can't reply half an hour later still asking for stuff<sub>4:12 PM</sub>
</dd>
<dd>but yeah I got chicken<sub>4:16 PM</sub>
</dd>
</div>
<div class="in">
<dt>Mabel</dt>
<dd class="emoji1"><sub>4:16 PM</sub>
</dd>
</div>
</dl>
查看CodePen
在 WhatsApp 群聊中，该名称显示为该人发送的一系列文本的第一行。
我想要的：
一开始我只是试了这个，做一些space，然后把名字翻译到位。
.whatsapp.grouptext .incoming dt+dd {
padding-top: 1.5em;
}
但是，如果有人只是说 "no" 或其他内容，那么文本气泡就那么窄，并且它的宽度不足以容纳名称。名称和文本的长度都可以不同，我真的不想硬编码为固定像素大小或其他东西。
我真正想要的是将两者合并为一个元素，或者将<dt>的内容变成<dd>的:before。有什么办法吗？
（是的，我 可以 将前两个包裹在 <div> 或其他任何东西中。但是还有其他方法吗？？）
据我了解，
您需要全名 + 文本才能在一个气泡中显示。 为此，您可以为 .in 和 .out div 提供背景和样式。指向箭头也是如此。
你需要有一些宽度，所以气泡有一些宽度。 为此删除给 dd.
的浮点数 left/right
其余的你可以使用边距和填充来修复。
将 <div> 更改为 <ul>，并将每条短信更改为 <li>。每个<li>有：
默认值指定为 CSS variables
[1]--variableName: value ... property: var(--variableName);
Pseudo-element
::beforeandcontent: attr()property and value分别用于组名[2],用户名[4]，和时间戳[5]<tagName attributeName="attributeValue">Text content</tagName>
selector::before { content: '#'attr(attributeName)': ';... /* Result as Rendered HTML #attributeValue: Text content */
各种
backgroundproperties用于头像图像[3].自定义样式已分配给特定
#id[6].
演示
注意： 为显示演示提供的初始 iframe 未呈现任何实际尺寸。要正确查看演示，请单击右侧的 Full page link。
/* [1] Defaults */
:root {
/* Default avatar */
--img: url(https://i.ibb.co/Br95K5G/wa0000000.png);
/* Default background colors */
--grn: rgba(12, 128, 8, 0.6);
--lav: rgba(8, 12, 128, 0.6);
}
:root,
body {
width: 100%;
height: 100%;
padding: 0;
font: 700 3vw/1.45 Arial;
overflow-y: hidden;
}
main {
position: relative;
height: 90vh;
margin: 0 auto;
overflow-y: scroll;
}
header {
position: fixed;
top: 0;
width: 100%;
height: 15%;
padding-bottom: 0;
border-bottom: 5px ridge #000;
background-color: #fff;
}
h1 {
margin: 0 0 8px 0;
padding-bottom: 15px;
}
h1::before {
/* [2] Group name */
content: attr(data-group);
font-size: 1.5rem;
font-variant: small-caps;
letter-spacing: 0.2rem;
}
.text {
padding: 4rem 0;
}
li {
margin: 0 0 0.5rem 0;
padding: 1.25rem 1.25rem 1.25rem 3.75rem;
border: 0;
border-radius: 8px;
/* [3] Avatar */
list-style: none;
background-image: var(--img);
background-repeat: no-repeat;
background-position: 0.5rem center;
background-size: 2.5rem;
}
li::before {
/* [4] User name */
content: attr(data-user)': ';
border: 0;
border-radius: 5px;
margin: 0 5px 0 -5px;
padding: 4px 0 2px 10px
}
.outgoing li,
.incoming li::before {
background-color: var(--grn)
}
.incoming li,
.outgoing li::before {
background-color: var(--lav)
}
time {
display: block;
margin-left: 75%;
margin-bottom:-15px;
}
time::before {
/* [5] Timestamp */
content: attr(datetime);
}
/* [6] Custom styles by user #id */
#wa2813224 {
background-image: url(https://i.ibb.co/Hdyh0V0/wa2813224.png);
background-color: #000;
color: gold
}
#wa1248791 {
background-image: url(https://i.ibb.co/d6bK0fZ/wa12248791.png)
}
footer {
position: fixed;
bottom: 0;
padding-top: 0;
width: 100%;
border-top: 5px ridge #000;
background-color: #000;
}
#ui * {
font: inherit
}
fieldset {
display: flex;
justify-content: center;
padding: 0;
border: 0;
background-color: #000;
}
#message {
width: 80vw;
min-height: 100%;
padding: 3px 5px;
border-top: 5px inset #333;
border-bottom: 5px inset #333;
border-left: 5px inset #333;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
resize: vertical;
}
#send {
min-height: 100%;
background-color: var(--lav);
font-size: 1.25rem;
font-variant: small-caps;
color: #fff;
border: 0;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
cursor: pointer;
}
@media only screen and (max-width: 600px) {
:root,
body {
font: 700 4vw/1.45 Arial;
}
header {
height: max-content
}
h1 {
margin: -8px 0;
}
time {
margin-left: 65%;
}
#send {
width: 10%;
padding: 1px 3.5%;
font-size: 0.75rem;
text-transform: uppercase;
line-height: 1;
word-break: break-word;
}
}
<main class='whatsapp group'>
<header>
<h1 data-group='Carpool'></h1>
</header>
<section class="text">
<ul class="outgoing">
<li id='wa1275966' data-user='Ciri'>Who's picking me up today?<time datetime='10:21 PM'></time></li>
</ul>
<hr>
<ul class="incoming">
<li id='wa0000000' data-user='default'>Hello world!<time datetime='10:26 PM'></time></li>
<li id='wa2813224' data-user='zer00ne'>Not me.<time datetime='10:31 PM'></time></li>
<li id='wa1248791' data-user='Aza Azdaema'>It's Tuesday...it's your turn.<time datetime='10:35 PM'></time></li>
<li id='wa2813224' data-user='zer00ne'>I don't have enough gas.<time datetime='10:45 PM'></time></li>
<li id='wa2813224' data-user='zer00ne'>Plus I'm not scheduled for Tuesdays. In fact I don't even work Tuesdays.<time datetime='10:46 PM'></time></li>
</ul>
</section>
<footer>
<form id='ui'>
<fieldset>
<textarea id='message' rows='1' cols='50'></textarea>
<button id='send' type='submit'>Send</button>
</fieldset>
</form>
</footer>
</main>