Селекторы атрибутов неэффективны при отображении элемента в "встроенном блоке" - что не так?

У меня есть группа кнопок общего доступа 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; }

Может кто-нибудь сказать мне, если я ошибаюсь здесь? Насколько мне известно, каждая кнопка общего доступа имеет этот общий класс как часть своего исходного кода, так что это должно помочь при внедрении желаемого стиля. Любая помощь приветствуется!

Источник

2 ответа

Решение

редактировать

Второе редактирование: .IN-widget динамически генерируется и не существует в разметке. Так что используйте 'script[type^=IN]' как ваш селектор см. отредактированный код ниже

Наличие одного на страницу и использование id было бы неэффективно, поэтому нам нужно использовать JavaScript/jQuery вместо CSS. Одним из основных ограничений CSS является невозможность управлять родителем и предками выбранного элемента.

Подробности комментируются в демоверсии

демонстрация 

/* 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>

Каждая кнопка "Поделиться" была лишена идентификаторов и является настолько общей, насколько это возможно для демонстрационных целей. На каждой странице включите jQuery внутри <script> теги и место, что <script> блок до закрытия </body> тег. Любые другие модификации HTML не нужны. Лучше всего использовать внешний скрипт, чтобы каждая страница указывала на этот файл.js. Чтобы сохранить запрос http, вы можете добавить эти три строки в существующий скрипт.js, но вам нужно быть знакомым с jQuery/JavaScript, чтобы сделать это безопасно.

Explination

Этот шаблон (как и все подобные шаблоны, Squarespace, Word-Press и т. Д.) Представляет собой кластер-фу #@ 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 и jQuery. На первый взгляд, это элемент, который вы видите в браузере. Это "двоюродный брат" значок .fb Это означает, что по отношению к отношениям они не являются братьями и сестрами, как это выглядит при просмотре в браузере. У них нет общих родителей, как у братьев и сестер, поэтому стили, связанные с положением, потоком, расположением и т. Д., Не влияют на двоюродного брата. Двоюродные братья изолированы друг от друга, потому что они вложены в свои собственные родительские элементы, а также любые элементы-предки. Поэтому вы должны найти предка .linkedIn который имеет родного брата, который является предком .fb, Смущенный? Я тоже.

Решение

Вот бабушка:

 #block-yui_3_17_2_1_1493318168221_183886

# средства id что, безусловно, является самым простым и точным способом определения местоположения конкретного элемента. Причина, по которой идентификатор является лучшим средством выбора элемента, заключается в том, что идентификатор является уникальным для любого данного документа (т. Е. Отдельной веб-страницы).

Это набор правил, который должен сделать этот значок LinkIn встроенным в иконки Twitter и Facebook:

 #block-yui_3_17_2_1_1493318168221_183886 { display: inline-block; top:3px}
Источник

Пример Linkedin Share Проверьте этот 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>
Источник
Другие вопросы по тегам