如何在CSS中選擇此特定行？

<div class="icons"> 
<a href="https://www.facebook.com/" class="fa fa-facebook" alt="facebook" title="Facebook"></a> 
<a href="https://twitter.com/" class="fa fa-twitter" alt="twitter" title="Twitter"></a> 
</div>

我想將每個圖標分別放在div中，我怎樣才能在CSS中單獨選擇圖標？ .icons a {編輯div中的所有圖標，所以我無法控制定位。如何在CSS中選擇此特定行？

來源

2017-10-19 Stacey

你問如何選擇一個元素的直接子。我發現你是新手，所以請確保你在提問之前通過先前的問題進行搜索。 –

爲什麼你把圖標放在一個div中，如果你想分開放置它們呢？ –

您可以先用胎和最後一個孩子。

.icons a:first-child { color: red; } // just affects facebook-link 
.icons a:last-child { color: blue; } // just affects twitter-link

i如果有兩個以上的孩子，您可以使用:nth-child(x)

你也可以簡單地通過類直接樣式的鏈接：

.icons a.fa-twitter { }

來源

2017-10-19 07:09:53

很多很好的答案，但這對我來說就像我想要的，謝謝！ – Stacey

您可以試用pseudo class。

例如，爲了解決你的問題一個辦法是：

.icons a:first-child {}和.icons a:last-child {}

來源

2017-10-19 07:09:30

如果你想獨立針對每個錨標記（並且您不想使用您已有的便利課程[1]），則可以使用第n個子虛擬選擇器：

.icons > a:nth-child(1){background:red;} 
 
.icons > a:nth-child(2){background:green;}

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"> 
 

 

 
<div class="icons"> 
 
<a href="https://www.facebook.com/" class="fa fa-facebook" alt="facebook" title="Facebook"></a> 
 
<a href="https://twitter.com/" class="fa fa-twitter" alt="twitter" title="Twitter"></a> 
 
</div>

檢查browser support for nth-child。

[1]：您正在使用fontawesome fa-facebook和fa-twitter類，爲什麼不選擇那些？

.icons > a.fa-facebook{background:red;} 
 
.icons > a.fa-twitter{background:green;}

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"> 
 

 

 
<div class="icons"> 
 
<a href="https://www.facebook.com/" class="fa fa-facebook" alt="facebook" title="Facebook"></a> 
 
<a href="https://twitter.com/" class="fa fa-twitter" alt="twitter" title="Twitter"></a> 
 
</div>

附錄：是的，你可以使用first-child和last-child在其他的答案指出。我確實寫了我的答案，假設會有更多的圖標，所提供的代碼只是一個最小的例子。但是，如果您只需要兩個，請隨時使用first-child和last-child。

來源

2017-10-19 07:12:44 Theraot

-2

有一兩件事你可以嘗試是使用jQuery遍歷它們：

$(".icons a").each(function(index, element){ 
    //index is the current element index 
    //element is the a tag 
});

來源

2017-10-19 07:12:47

他想要以不同方式設計a-tags。爲什麼有人會將jQuery看作是世界上所有事物的解決方案：D –

您可以使用僞元素:first-child，:last-child當然:nth-child(x)的，如果你有超過2名兒童。檢查下面的代碼片段以供參考。

.icons a:first-child { 
 
    color: red; 
 
} 
 

 
.icons a:nth-child(2) { 
 
    color: green; 
 
} 
 

 
.icons a:nth-child(3) { 
 
    color: cyan; 
 
} 
 

 
.icons a:last-child { 
 
    color: yellow; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="icons"> 
 
    <a href="https://www.facebook.com/" class="fa fa-facebook" alt="facebook" title="Facebook"></a> 
 
    <a href="https://twitter.com/" class="fa fa-twitter" alt="twitter" title="Twitter"></a> 
 
    <a href="https://www.facebook.com/" class="fa fa-facebook" alt="facebook" title="Facebook"></a> 
 
    <a href="https://twitter.com/" class="fa fa-twitter" alt="twitter" title="Twitter"></a> 
 
</div>

來源

2017-10-19 07:14:50

如何在CSS中選擇此特定行？

回答

相關問題