属性选择器在显示 "inline-block" 中的元素时无效 - 怎么了？

Question

我的博客页面中有一组 LinkedIn 共享按钮（通过 LinkedIn 提供），我试图将它们与其他共享按钮水平对齐。到目前为止，我已经尝试了大部分方法，并决定——无效地——尝试属性选择器来让按钮做我想做的事。这是按钮代码：

<script src="//platform.linkedin.com/in.js" type="text/javascript">
  <span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block; text-align: center;">

并且尝试CSS：

span[class="IN-widget"] { display: inline-block; }

谁能告诉我我是否在这里走错了？据我所知，每个分享按钮都有这个通用的 class 作为其源代码的一部分，所以这个应该可以用来引入所需的样式。任何帮助将不胜感激！

Answer 1

Linkedin 分享示例检查这个 jsfiddle：https://jsfiddle.net/wrahvvr2/

JS:

<script src="//platform.linkedin.com/in.js" type="text/javascript">
  lang: en_US
</script>
<script type="IN/Share" data-counter="top"></script>

CSS（这应该针对分享按钮）：

span[class="IN-widget"] {
  display: inline-block;
  background: red;
}

顺便说一句：

您有一个打开的脚本标签：

<script src="//platform.linkedin.com/in.js" type="text/javascript">

你应该关闭它：

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>

Answer 2

编辑

Second Edit: .IN-widget is dynamically generated and doesn't exist in markup. So use 'script[type^=IN]' as your selector see edited code below

每页一个并使用 id 会效率低下，因此我们需要使用 JavaScript/jQuery 而不是 CSS。 CSS 的一个主要限制是它无法控制选定元素的 parent 和祖先。

详情在demo中评论

演示

/* The selector means:
|| Find a <script> tag that has a [type] attribute 
|| that's value begins ^= with the string of "IN"
*/
/* The .closest() method will find the ancestor closest 
|| to the targeted selector. So here it's saying:
|| (Previous comment here)
|| Find the closest ancestor of the selected element 
|| which has the classes .sqs-block, .code-block, 
|| and .sqs-block-code.(grandma)
|| Use .css() method to change grandma's styles.
|| The extra style top:3px is just to push the icon down
|| down so that it is inline with FB and Twit icons.
*/

$('script[type^=IN]').closest('.sqs-block.code-block.sqs-block-code').css({
  'display': 'inline-block',
  'top': '3px'
});

$('.fb-share-button').closest('.sqs-block.code-block.sqs-block-code').css('display', 'inline-block');

$('.twitter-share-button').closest('.sqs-block.code-block.sqs-block-code').css('display', 'inline-block');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="sqs-block code-block sqs-block-code">
  <div class="sqs-block-content">
    <div class="fb-share-button fb_iframe_widget"><span style="vertical-align: bottom; width: 58px; height: 20px;"><iframe width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" src="https://www.facebook.com/v2.8/plugins/share_button.php?app_id=&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2F0F7S7QWJ0Ac.js%3Fversion%3D42%23cb%3Df836e17d67a66%26domain%3Dtylercharboneauprofessional.com%26origin%3Dhttps%253A%252F%252Ftylercharboneauprofessional.com%252Ff23efc0724f4838%26relation%3Dparent.parent&amp;container_width=39&amp;href=https%3A%2F%2Fwww.tylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election%2F&amp;layout=button&amp;locale=en_US&amp;mobile_iframe=false&amp;sdk=joey" style="border: none; visibility: visible; width: 58px; height: 20px;" class=""></iframe></span>
    </div>
  </div>
</div>

<div class="sqs-block code-block sqs-block-code">
  <div class="sqs-block-content">

    <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-share-button twitter-share-button-rendered twitter-tweet-button" style="position: static; visibility: visible; width: 60px; height: 20px;" src="https://platform.twitter.com/widgets/tweet_button.5b6375bb17bd9edb2f4e7f8f12971999.en.html#dnt=true&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=https%3A%2F%2Ftylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election&amp;size=m&amp;text=Your%20Guide%20to%20the%20French%20Presidential%20Election%2C%20and%20Why%20it%20Matters%20%E2%80%94%20Tyler%20Charboneau&amp;time=1495223324688&amp;type=share&amp;url=https%3A%2F%2Ftylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election"></iframe>

  </div>
</div>

<div class="sqs-block code-block sqs-block-code">
  <div class="sqs-block-content">

    <span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block; text-align: center;"><span style="padding: 0px !important; margin: 0px !important; text-indent: 0px !important; display: inline-block !important; vertical-align: baseline !important; font-size: 1px !important;">
<span><a href="javascript:void(0);"><span>in</span><span><span></span><span>Share</span></span>
    </a>
    </span>
    </span>
    </span>
    <script type="IN/Share"></script>
  </div>
</div>

每个共享按钮都已去除 ID，并且尽可能通用以用于演示目的。在每个页面上，将 jQuery 包含在 <script> 标签内，并将 <script> 块放在结束 </body> 标签之前。不需要对 HTML 进行任何其他修改。更好的方法是使用外部脚本并让每个页面都指向该 .js 文件。要保存 http 请求，您可以将这 3 行添加到现有的 .js 脚本中，但您需要熟悉 jQuery/JavaScript 才能安全地执行此操作。

解释

此模板（如所有此类模板、Squarespace、Word-Press 等）是 cluster-fu#@ 的 HTML。如果您找到一个特定的元素并且您需要实际移动它，或者在布局中表现，或者遵守流程，您将需要向上移动 DOM 层次结构，直到找到具有兄弟姐妹的祖先。例如：

 <div class='great-great-great-aunt'>
     <!--Many levels of cousins-->
        <span class='fb'>Facebook I need to liked!</span>
     <!--...</div>...-->
   </div>
   <div class='great-great-grandma'>
      <div class='great-grandma'>  
         <div class='grandma'>
            <div class='mom'>
               <span class='linkedIn'>Hey I'm a corporate clone! How about you?</span>
            </div>
          </div>
       </div>
     </div>

此示例中的目标元素是 .linkedIn（请注意 className 之前的 .，这是 CSS 中 class 选择器的正确语法=] 和 jQuery.) 从表面上看，这就是您在浏览器中看到的元素。它的 "cousin" 图标是 .fb，这意味着就关系而言，它们在浏览器中呈现时并不是兄弟姐妹。他们不像兄弟姐妹那样共享相同的 parent，因此涉及位置、流程、布局等的样式不会影响表亲。表兄弟彼此隔离，因为它们嵌套在自己的 parent 元素以及任何祖先元素中。因此，您必须找到 .linkedIn 的祖先，它的兄弟姐妹是 .fb 的祖先。使困惑？我也是。

解决方案

这里是奶奶：

 #block-yui_3_17_2_1_1493318168221_183886

A # 表示 id，这是迄今为止定位特定元素的最简单和最准确的方法。 id 是选择元素的最佳方式的原因是因为 id 在任何给定文档中都是唯一的（即单个网页）。

这是应该使 linkedIn 图标与 Twitter 和 Facebook 图标内联的规则集：

 #block-yui_3_17_2_1_1493318168221_183886 { display: inline-block; top:3px}

属性选择器在显示 "inline-block" 中的元素时无效 - 怎么了？

Attribute selectors ineffective in displaying element in "inline-block" - what's wrong?

html

javascript

css

share-button

Linkedin 分享示例检查这个 jsfiddle：https://jsfiddle.net/wrahvvr2/

编辑

演示

解释

解决方案