添加自定义 CSS 以添加此按钮？

Question

我在网站的各个部分都使用了addthis 按钮，我想向它们添加自定义 CSS。我该怎么做？

<a role="button" tabindex="1" class="at-icon-wrapper at-share-btn at-svc-email" style="border-radius: 2px; background-color: rgb(132, 132, 132);">
  <span class="at4-visually-hidden">Share to Email</span>
  <span class="at-icon-wrapper" style="line-height: 32px; height: 32px; width: 32px;">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="at-icon at-icon-email" style="fill: rgb(255, 255, 255); width: 32px; height: 32px;">
      <g>
        <g fill-rule="evenodd"></g>
        <path d="M27 22.757c0 1.24-.988 2.243-2.19 2.243H7.19C5.98 25 5 23.994 5 22.757V13.67c0-.556.39-.773.855-.496l8.78 5.238c.782.467 1.95.467 2.73 0l8.78-5.238c.472-.28.855-.063.855.495v9.087z"></path>
        <path d="M27 9.243C27 8.006 26.02 7 24.81 7H7.19C5.988 7 5 8.004 5 9.243v.465c0 .554.385 1.232.857 1.514l9.61 5.733c.267.16.8.16 1.067 0l9.61-5.733c.473-.283.856-.96.856-1.514v-.465z"></path>
      </g>
    </svg>
  </span>
</a>

这是单个按钮在控制台中的显示方式，但我不能简单地从此处获取类名并向其添加 CSS，因为它也会影响其他按钮，因为它们可能具有相同的类名。

Answer 1

/* Styles to simulate addthis formatting */
.atss .at-share-btn{border:0;padding:0}.atss .at-share-btn,.atss a{position:relative;display:block;width:3pc;margin:0;outline-offset:-1px;text-align:center;float:left;-webkit-transition:width .15s ease-in-out;transition:width .15s ease-in-out;overflow:hidden;background:#e8e8e8;z-index:100030;cursor:pointer}.at4-visually-hidden{position:absolute;clip:rect(1px,1px,1px,1px);padding:0;border:0;overflow:hidden}.atss .at-share-btn span .at-icon,.atss a span .at-icon{position:relative;top:0;left:0;display:block;background-repeat:no-repeat;background-position:50% 50%;width:2pc;height:2pc;line-height:2pc;border:none;padding:0;margin:0 auto;overflow:hidden;cursor:pointer;cursor:hand}.atss .at-share-btn .at-icon-wrapper,.atss a .at-icon-wrapper{display:block;padding:8px 0}a .at-icon-wrapper{cursor:pointer}.at-icon-wrapper{display:inline-block;overflow:hidden}

/* overwrite code */
.at-svc-email .at-icon-wrapper {
  background: green;
}
.at-svc-email .at-icon-wrapper svg {
  fill: tomato!important;
}

<a role="button" tabindex="1" class="at-icon-wrapper at-share-btn at-svc-email" style="border-radius: 2px; background-color: rgb(132, 132, 132);">
  <span class="at4-visually-hidden">Share to Email</span>
  <span class="at-icon-wrapper" style="line-height: 32px; height: 32px; width: 32px;">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="at-icon at-icon-email" style="fill: rgb(255, 255, 255); width: 32px; height: 32px;">
      <g>
        <g fill-rule="evenodd"></g>
        <path d="M27 22.757c0 1.24-.988 2.243-2.19 2.243H7.19C5.98 25 5 23.994 5 22.757V13.67c0-.556.39-.773.855-.496l8.78 5.238c.782.467 1.95.467 2.73 0l8.78-5.238c.472-.28.855-.063.855.495v9.087z"></path>
        <path d="M27 9.243C27 8.006 26.02 7 24.81 7H7.19C5.988 7 5 8.004 5 9.243v.465c0 .554.385 1.232.857 1.514l9.61 5.733c.267.16.8.16 1.067 0l9.61-5.733c.473-.283.856-.96.856-1.514v-.465z"></path>
      </g>
    </svg>
  </span>
</a>