爲什麼所有的錨定標籤都會在我將樣式限制在列表中的錨點時獲得樣式？

Question

我有一個列表<ul>，它位於我的頁面頂部。
列表位於div標籤中。
問題是，我需要設置一些css樣式到<a>裏面的類別.menu-social-icons其中的一個類別位於問題的底部。
但是，當我添加風格，如我寫波紋管所有<a>標籤頁上得到這些樣式。
我不知道爲什麼它傳播到所有鏈接。
我的CSS樣式有什麼問題嗎？
這是我的HTML輸出中：

<div class="full-width top-page-bar"> 
    <div class="row"> 
     <div class="large-12 columns"> 
      <div class="left"> 
       <ul class="right inline-list menu-social-icons show-for-large-up">     
         <li><a href="#" class="fa fa-twitter"></a></li> 
         <li><a href="#" class="fa fa-google-plus"></a></li> 
         <li><a href="#" class="fa fa-facebook"></a></li> 
         <li><a href="#" class="fa fa-linkedin"></a></li> 
         <li><a href="#" class="fa fa-youtube"></a></li> 
       </ul> 
      </div> 

      <div class="right"> 
       <ul class="no-bullet inline-list right account-holder"> 

       <li><a id="registerLink" title="Register" class="SkinObject" href="#">Register</a> 
</li> 
       <li><a id="loginLink" title="Login" class="LoginLink" href="#">Login</a> 
</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

這是引發問題的樣式：

.menu-social-icons li a, a:link, a.visited, a.active { 
border-radius: 50% 50% 50% 50%; 
color: #ff0000; 
display: inline-block; 
font-size: 20px; 
height: 35px; 
line-height: 35px; 
margin: 0 5px; 
padding: 0; 
text-align: center; 
width: 35px; 
background: #f1f1f1; 
} 

.menu-social-icons li a:hover { 
color: #fff; 
text-decoration: none; 
background: #ff0000; 
} 

Answer 1

爲：.menu-social-icons li a, a:link, a.visited, a.active

好：.menu-social-icons li a, .menu-social-icons li a:link, .menu-social-icons li a.visited, .menu-social-icons li a.active

完整的示例：

.menu-social-icons li a, .menu-social-icons li a:link, .menu-social-icons li a.visited, .menu-social-icons li a.active { 
 
border-radius: 50% 50% 50% 50%; 
 
color: #ff0000; 
 
display: inline-block; 
 
font-size: 20px; 
 
height: 35px; 
 
line-height: 35px; 
 
margin: 0 5px; 
 
padding: 0; 
 
text-align: center; 
 
width: 35px; 
 
background: #f1f1f1; 
 
} 
 

 
.menu-social-icons li a:hover { 
 
color: #fff; 
 
text-decoration: none; 
 
background: #ff0000; 
 
}

<div class="full-width top-page-bar"> 
 
    <div class="row"> 
 
     <div class="large-12 columns"> 
 
      <div class="left"> 
 
       <ul class="right inline-list menu-social-icons show-for-large-up">     
 
         <li><a href="#" class="fa fa-twitter"></a></li> 
 
         <li><a href="#" class="fa fa-google-plus"></a></li> 
 
         <li><a href="#" class="fa fa-facebook"></a></li> 
 
         <li><a href="#" class="fa fa-linkedin"></a></li> 
 
         <li><a href="#" class="fa fa-youtube"></a></li> 
 
       </ul> 
 
      </div> 
 

 
      <div class="right"> 
 
       <ul class="no-bullet inline-list right account-holder"> 
 

 
       <li><a id="registerLink" title="Register" class="SkinObject" href="#">Register</a> 
 
</li> 
 
       <li><a id="loginLink" title="Login" class="LoginLink" href="#">Login</a> 
 
</li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

此選擇的問題是：.menu-social-icons li a, a:link, a.visited, a.active 它被應用於：鏈接，一個。訪問和a.active。你有他們的範圍太，像這樣：

.menu-social-icons li a, .menu-social-icons li a:link, .menu-social-icons li a.visited, .menu-social-icons li a.active

Answer 3

也增加。菜單，社會圖標，剩餘一：鏈接：走訪a.active或將適用於所有的<a>

.menu-social-icons li a, a:link, a.visited, a.active { 
      border-radius: 50% 50% 50% 50%; 
      color: #ff0000; 
      display: inline-block; 
      font-size: 20px; 
      height: 35px; 
      line-height: 35px; 
      margin: 0 5px; 
      padding: 0; 
      text-align: center; 
      width: 35px; 
      background: #f1f1f1; 
    } 

這個

.menu-social-icons li a, .menu-social-icons li a:link, .menu-social-icons a.visited, a.active { 
      border-radius: 50% 50% 50% 50%; 
      color: #ff0000; 
      display: inline-block; 
      font-size: 20px; 
      height: 35px; 
      line-height: 35px; 
      margin: 0 5px; 
      padding: 0; 
      text-align: center; 
      width: 35px; 
      background: #f1f1f1; 
    } 

Answer 4

你的CSS聲明沒有做什麼，你認爲它是。這條線

.menu-social-icons li a, a:link, a.visited, a.active { 

樣式應用於.menu-social-icons li a，並在link，visited，或active狀態的任何鏈接。

要解決此問題，需要使用以下命令：

.menu-social-icons li a, .menu-social-icons li a:link, 
.menu-social-icons li a.visited, .menu-social-icons li a.active {