2
を使用してCSSを無効にするにはどうすれば持って、次のCSS私は、インターネットからダウンロードしたスクロール画像プラグインの一部として：* /全ての表記
*、*：の後に、*：前{-webkit-ボックス - サイジング：border-box; -moz-box-sizing：ボーダーボックス。ボックスサイズ：border-box; }
もう1つ左のソーシャルメディアバーを作成したかったのです。このメディアバーは、上記のスクロールプラグインを持たない他のページでも動作します。だから、スクロールプラグインとソーシャルメディアバーのCSSが適切に表示されない原因となっているCSSとの重複があります。ここで
は、メディアバーは、細かい作業のためJSFiddleでのソースコードです：
https://jsfiddle.net/6bjbra49/
/*
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*/
.media-bar {
\t position: fixed;
\t top: 50px;
\t left: -40px;
}
.social {
width: 200px;
}
.social li a {
display: block;
height: 20px;
width: 40px;
background: #222;
border-bottom: 1px solid #333;
font: normal normal normal
16px/20px
'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif;
color: #fff;
-webkit-font-smoothing: antialiased;
padding: 10px;
text-decoration: none;
text-align: center;
transition: background .5s ease .300ms
}
.social li:first-child a:hover { background: #3B5998 }
.social li:nth-child(2) a:hover { background: #bb0000 }
.social li:nth-child(3) a:hover { background: #125688 }
.social li:nth-child(4) a:hover { background: #f40083 }
.social li:nth-child(5) a:hover { background: #cb2027 }
.social li:nth-child(6) a:hover { background: #bb0000 }
.social li:first-child a { border-radius: 0 5px 0 0 }
.social li:last-child a { border-radius: 0 0 5px 0 }
.social li a span {
width: 100px;
float: left;
text-align: center;
background: #222;
color: #fff;
margin: -25px 74px;
padding: 8px;
transform-origin: 0;
visibility: hidden;
opacity: 0;
transform: rotateY(45deg);
border-radius: 5px;
transition: all .5s ease .300ms
}
.social li span:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 7px;
border-left: 10px solid transparent;
border-right: 10px solid #222;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
.social li a:hover span {
visibility: visible;
opacity: 1;
transform: rotateY(0)
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="media-bar">
<ul class='social'>
\t <li>
\t \t <a class="fa fa-facebook" href="#"><span>Facebook</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-yelp" href="#"><span>Yelp!</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-instagram" href="#"><span>Instagram</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-flickr" href="#"><span>Flickr</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-pinterest" href="#"><span>Pinterest</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-youtube" href="#"><span>You Tube</span></a>
\t </li>
</ul>
</div>あなたはCSSでの最初の行をコメントを解除した場合、あなたが表示されます結果として正常に動作しないコード：
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.media-bar {
\t position: fixed;
\t top: 50px;
\t left: -40px;
}
.social {
width: 200px;
}
.social li a {
display: block;
height: 20px;
width: 40px;
background: #222;
border-bottom: 1px solid #333;
font: normal normal normal
16px/20px
'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif;
color: #fff;
-webkit-font-smoothing: antialiased;
padding: 10px;
text-decoration: none;
text-align: center;
transition: background .5s ease .300ms
}
.social li:first-child a:hover { background: #3B5998 }
.social li:nth-child(2) a:hover { background: #bb0000 }
.social li:nth-child(3) a:hover { background: #125688 }
.social li:nth-child(4) a:hover { background: #f40083 }
.social li:nth-child(5) a:hover { background: #cb2027 }
.social li:nth-child(6) a:hover { background: #bb0000 }
.social li:first-child a { border-radius: 0 5px 0 0 }
.social li:last-child a { border-radius: 0 0 5px 0 }
.social li a span {
width: 100px;
float: left;
text-align: center;
background: #222;
color: #fff;
margin: -25px 74px;
padding: 8px;
transform-origin: 0;
visibility: hidden;
opacity: 0;
transform: rotateY(45deg);
border-radius: 5px;
transition: all .5s ease .300ms
}
.social li span:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 7px;
border-left: 10px solid transparent;
border-right: 10px solid #222;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
.social li a:hover span {
visibility: visible;
opacity: 1;
transform: rotateY(0)
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="media-bar">
<ul class='social'>
\t <li>
\t \t <a class="fa fa-facebook" href="#"><span>Facebook</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-yelp" href="#"><span>Yelp!</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-instagram" href="#"><span>Instagram</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-flickr" href="#"><span>Flickr</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-pinterest" href="#"><span>Pinterest</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-youtube" href="#"><span>You Tube</span></a>
\t </li>
</ul>
</div>にはどうすればメディアバーが正常に動作するように修正することができても、最初のCSSライン（*、*：の後に、*：前の）コードに存在します。