如何訪問這兩個ID在一個CSS選擇

我有格有三個按鍵爲，如何訪問這兩個ID在一個CSS選擇

<div id="buttons"> 
    <input id="preview" class="ButtonStyle" type="submit" value="Preview" name="preview"> 
    <input id="add" class="ButtonStyle" type="submit" value="Save" name="add"> 
    <input id="Cancel" class="ButtonStyle" type="submit" value="Cancel" name="Cancel"> 
</div>

我設置它的風格。我想要添加和取消按鈕都有他們的左邊距：5px;現在我正在這樣做，

#outboxmidpg #buttons input[type="submit"]{ 
    font-weight: bold; 
    width: 70px; 
} 

#outboxmidpg #buttons input[id="Cancel"] { 
    margin-left: 5px; 
} 

#outboxmidpg #buttons input[id="add"] { 
    margin-left: 5px; 
}

我想在一行中做到這一點。我試過這個，但它不起作用，它也刪除了取消按鈕邊距。

#outboxmidpg #buttons input[id="Cancel"] input[id="add"] { 
    margin-left: 5px; 
}

是否有無論如何，我可以在一條線上實現風格？

感謝

來源

2012-03-28 Basit

#buttons input:nth-child(2), #buttons input:nth-child(3){ 
    margin-left:5px; 
}

爲您工作？

或者乾脆：

#Cancel, #add{ 
    margin-left:5px; 
}

隨着,分離 - 你開始一個全新的CSS選擇器，並結合他們。

來源

2012-03-28 06:39:53

哦，這是很好的。是的，第一個人在工作，但你爲什麼要問這個？這不常見嗎？我用了第一個，因爲它對我來說是新的。你正在選擇孩子。看起來不錯:)但請告訴我哪一個更好，或者這只是一個風格或偏好的問題？謝謝 – Basit 2012-03-28 06:48:27

你應該堅持第二個版本，因爲老年人瀏覽器和新的Internet Explorer版本不支持n-child！我只是想知道它是否有效;-)。 – 2012-03-28 06:51:11

哦，但爲什麼瀏覽器不支持第n孩子？他們有任何有效的理由嗎？只是爲了好奇:) – Basit 2012-03-28 06:58:37

試試這個

#outboxmidpg #buttons input[id="Cancel"], #outboxmidpg #buttons input[id="add"] { 
    margin-left: 5px; 
}

來源

2012-03-28 06:38:38 PraveenVenu

您需要通過逗號分隔選擇（，）在各自的全限定路徑，否則將無法正常工作：

#outboxmidpg #buttons input[id="Cancel"], 
#outboxmidpg #buttons input[id="add"] { 
    margin-left: 5px; 
}

來源

2012-03-28 06:39:02

你可以在一行中完成，但它將是兩個選擇器。試試這個：

#outboxmidpg #buttons input#Cancel, #outboxmidpg #buttons input#add { 
    margin-left: 5px; 
}

另外，儘量選擇ID的時候使用#，這是選擇它們的正確方法。

來源

2012-03-28 06:40:40 professorsloth

要做的最佳做法是：只需將所有的id/class分開並用逗號（，）分開，然後將自定義樣式插入其正文。

#Button_One, #Button_Two { 
vertical-align: middle; 
    padding-top: 10px; 
    margin-top: 1px; 
}

希望它能幫助:)

來源

2014-12-11 02:11:06 spongecode

如何訪問這兩個ID在一個CSS選擇

回答

相關問題