javascript - 属性选择器在显示 "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; }

如果我在这里走错了，谁能告诉我？据我所知，每个共享按钮都有这个公共(public)类作为其源代码的一部分，因此这应该在引入所需样式方面起到了作用。任何帮助将不胜感激!

Answer 1

编辑

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 的一个主要限制是它无法控制所选元素的父元素和祖先元素。

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 等)是一个 HTML 的集群 fu#@。如果您找到一个特定的元素并且您需要实际移动它，或者在布局中表现，或者遵守流程，您将需要向上移动 DOM 层次结构，直到找到具有 sibling 的祖先。例如:

 <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 和 jQuery 中类选择器的正确语法。)从表面上看，这就是您在浏览器中看到的元素。它的“表哥”图标是.fb ，这意味着就关系而言，当在浏览器中呈现时，它们并不是 sibling 。他们不像 sibling 那样拥有相同的 parent ，因此涉及位置、流程、布局等的样式不会影响堂 sibling 。表兄弟彼此隔离，因为它们嵌套在自己的父元素以及任何祖先元素中。因此你必须找到.linkedIn的祖先有一个 sibling 是 .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}