CSS沒有元素的第一個/最後一個孩子？

-1

找不到合適的語言來這樣解釋這裏是一個代碼示例：CSS沒有元素的第一個/最後一個孩子？

<button class="btn btn-default"> 
    <i class="glyphicon glyphicon-alert"></i> 
    <span>button</span> 
</button> 
<button class="btn btn-default"> 
    <span>button</span> 
    <i class="glyphicon glyphicon-alert"></i> 
</button>

兩個按鈕，一個與前一個glyphicon，一個與結束glyphicon

現在讓我們說，我們要添加更多的單詞和圖標之間的間隙：

.btn { 
    > .glyphicon:first-child { 
     margin-right: 15px; 
    } 
    > .glyphicon:last-child { 
     margin-left: 15px; 
    } 
}

工作得很好，像這樣：http://codepen.io/anon/pen/wzxRPw

我的疑問句重刑...如果沒有額外的跨度的話，這將如何做？

如果我刪除跨度那麼glyphicon是唯一的元素，所以它當作第一個和最後

編輯兩個：注：我在這個問題的目的是找出如何/如果這可以沒有添加額外的類，沒有span標籤。

我知道，也許理想的解決方案是保持跨度或添加一個類，我只是想，也許有一種方法可以做到這一點，我不知道的CSS（我還在學習）

來源

2016-10-15 mejobloggs

我覺得你」試圖消除那些真的不需要被消除的代碼（這只是我的觀點）。不管你做什麼，如果你沒有將文字包裝在span標籤或其他類似的東西中，實際上只會有1個子元素<button>。這意味着，如果不明確設置類或內聯樣式，您將無法定位除該元素之外的其他任何元素。跨度標籤是一個很好的解決方案，但如果你堅持讓他們擺脫你有一對夫婦的其他選項（不過，我覺得跨度標籤是最好的）：

創建一個CSS類，定義邊距偏移量並將其設置爲相應按鈕。所以，你想.margin-left一個和.margin-right類設置爲其他
你可以寫爲每個glyphicons的內嵌樣式。

就像我上面說的，我認爲你有你的選擇的最佳解決方案。我不認爲你還有什麼可以做的。

來源

2016-10-15 04:16:48 James

是的，你最終可能是對的。我提出這個問題的動機是或許學習一些我不知道的方便的CSS，或者是一種更好或更乾淨的方式去做事情。最後，我想我會使用額外的.margin-left/right類（如你所建議的），因爲我更喜歡這個範圍 – mejobloggs

@mejobloggs好的交易！那麼，如果這個答案是正確的（在你看來），當你有機會時，標記就是正確的答案。 – James

-1

我不清楚你究竟想要得到什麼結果，但仍然不知道你有什麼想法來決定它是否適合你的需要。

如果你可以，你可以添加glyphicon和跨度
之間如果您只刪除span標籤則可以設置爲span標籤，而不是glyphicon各自的利潤

來源

2016-10-15 03:55:55 Naveen

沒有跨度唯一合理的解決辦法是增加一個類：

<button class="btn btn-default icon-on-left"> 
    <i class="glyphicon glyphicon-alert"></i> 
    button 
</button> 
<button class="btn btn-default icon-on-right"> 
    button 
    <i class="glyphicon glyphicon-alert"></i> 
</button>

和適當的風采吧。但是這會產生可維護性問題：在更改按鈕的內容時，您需要同步更改其類。

來源

2016-10-16 01:11:30

這個問題被問及如何去除，而不是增加額外的模擬更多的類。閱讀從左到右，從上到下。嘗試一下。一個解決方案不應該有一個免責聲明導致更多的問題，這不是一個真正的解決方案。它只是交換問題集。 – developernator

發佈相同的不相關的鏈接到你的小提琴沒有根據這個問題沒有幫助...這是一個真實的例子看起來像：https://jsfiddle.net/805kLguz/ – developernator

CSS沒有元素的第一個/最後一個孩子？

回答

相關問題