我使用带有统计后端的Shariff解决方案，为访问者提供在社交媒体上共享内容的简单方法。
基于来自统计后端的数据，Shariff将动态(JavaScript(向每个共享提供商(例如Facebook、Twitter…(引入<span class="share_count">0</span>元素，该元素在统计后端数据中具有相关的共享计数。
现在，我想为每个Shariff按钮设置样式，它没有share_count元素，只使用CSS。
这就是带有共享计数的Shariff按钮在HTML:中的样子
<li class="shariff-button facebook">
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2F" data-rel="popup" rel="nofollow" title="Bei Facebook teilen" role="button" aria-label="Bei Facebook teilen">
<span class="fab fa-facebook-f"></span>
<span class="share_count">12k</span>
</a>
</li>
这就是没有共享计数的Shariff按钮的样子：
<li class="shariff-button facebook">
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2F" data-rel="popup" rel="nofollow" title="Bei Facebook teilen" role="button" aria-label="Bei Facebook teilen">
<span class="fab fa-facebook-f"></span>
</a>
</li>
只有当CSS中有一个特定的跟随元素(而不是子元素(时，我才能选择它。
如果Shariff按钮没有共享计数，我如何将Shariff图标居中
// This is only a dummy to demonstrate the runtime manipulations done by Shariff.
setTimeout( function(){
$(".shariff-container .shariff-button:not(.twitter):not(.whatsapp):not(.telegram):not(.threema):not(.linkedin):not(.tumblr):not(.mail):not(.print):not(.info)").each(function(){
$(this).find("span").after('<span class="share_count">12k</span>')
});
}, 10 );.shariff-container { text-align: center; }
.shariff { display: inline-block; text-align: left; }
.shariff-heading { font-size: 1.2em; font-weight: bold; }
.shariff-button a { padding-left: 8px; }
.shariff-button.info a { padding-left: 0; }
@media print { .shariff-container { display: none; } }<script src="https://cdn.jsdelivr.net/npm/shariff@3.2.1/dist/shariff.complete.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/shariff@3.2.1/dist/shariff.complete.css" rel="stylesheet"/>
<aside class="shariff-container">
<div class="shariff-heading">Share on social media</div>
<div class="shariff" data-button-style="icon-count" data-lang="de" data-url="https://example.com/" data-twitter-via="twitter-handle" data-title="Site Title" data-mail-subject="mail subject" data-mail-body="mail body" data-mail-url="mailto:" data-services="["facebook","twitter","whatsapp","telegram","threema","linkedin","xing","reddit","tumblr","pinterest","mail","print","info"]"></div>
</aside>您问了一个XY问题。我只想稍微调整一下你的弹性布局。
// This is only a dummy to demonstrate the runtime manipulations done by Shariff.
setTimeout(function() {
$(".shariff-container .shariff-button:not(.twitter):not(.whatsapp):not(.telegram):not(.threema):not(.linkedin):not(.tumblr):not(.mail):not(.print):not(.info)").each(function() {
$(this).find("span").after('<span class="share_count">12k</span>')
});
}, 10);.shariff-container {
text-align: center;
}
.shariff {
display: inline-block;
text-align: left;
}
/* start changes ******************************/
body .shariff li a {
display: flex;
justify-content: center;
}
body .shariff li .share_count {
position: relative;
right: 0;
}
/* end changes ********************************/
.shariff-heading {
font-size: 1.2em;
font-weight: bold;
}
.shariff-button a {
padding-left: 8px;
}
.shariff-button.info a {
padding-left: 0;
}
@media print {
.shariff-container {
display: none;
}
}<script src="https://cdn.jsdelivr.net/npm/shariff@3.2.1/dist/shariff.complete.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/shariff@3.2.1/dist/shariff.complete.css" rel="stylesheet" />
<aside class="shariff-container">
<div class="shariff-heading">Share on social media</div>
<div class="shariff" data-button-style="icon-count" data-lang="de" data-url="https://example.com/" data-twitter-via="twitter-handle" data-title="Site Title" data-mail-subject="mail subject" data-mail-body="mail body" data-mail-url="mailto:" data-services="["facebook","twitter","whatsapp","telegram","threema","linkedin","xing","reddit","tumblr","pinterest","mail","print","info"]"></div>
</aside>你可以做
.shariff-button:not(:has(.share_count)){}
您是否尝试过使用这样的系统：.shariff-button:not(.share_count_div) {}
因此，如果它也有类share_count_div，它将运行样式片段