CSS第一個和最后一個子元素

Question

我在div內渲染2個按鈕，並想向左浮動一個按鈕，向右浮動一個按鈕。

我以為可以使用：first-child和last：child元素，但是：first-child的css似乎運行了，然后被：last-child標記覆蓋了

我也嘗試使用：nth-​​child（1）選擇器

這是一個示例： http : //www.bootply.com/elg2cP9Usp

編輯：正確的工作代碼，謝謝：

<div class="container"> 
    <button type="button" class="btn btn-default 1">On</button>
    <button type="button" class="btn btn-default 2">Off</button>
 </div>

/* CSS used here will be applied after bootstrap.css */
.container {
        width: 100%;
        padding 25px 40px;
    }

    .container > .btn {
        min-width: 35%;   
    }

    .container > .btn:first-child {
        float: left;   
    }

    .container > .btn:last-child {
        float: right;   
    }

Answer 1

 /* CSS used here will be applied after bootstrap.css */ .container { width: 100%; padding 25px 40px; } .container > .btn { min-width: 35%; } .btn:first-child { float: left; } .btn:last-child { float: right; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <button type="button" class="btn btn-default">On</button> <button type="button" class="btn btn-default">Off</button> </div> 

錯誤的方法伙伴，瞄准按鈕.. !!

Answer 2

:first-child符號是一種誤導。 您需要將其直接應用於.btn類。

要獲得理想的結果，請嘗試：

.container .btn:first-child {
    float: left;   
}

.container .btn:last-child {
    float: right;   
}

為了避免任何按鈕組表現出這種行為，我將選擇器縮小為.container .btn 。

這是您的更新示例 。

Answer 3

您可能需要使用first-of-type和last-of-type選擇器，它們使您可以按元素類型選擇元素。 在這種情況下的button ：

.container button:first-of-type {
    float: left;   
}

.container button:last-of-type {
    float: right;   
}

代碼的分支在這里。