Làm thế nào để truy cập vào hai Id trong một css selector

Question

Tôi có div trong đó có ba nút như,

<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> 

tôi đặt kiểu của nó. Tôi muốn cả nút thêm và hủy đều có lề trái của nó: 5px; Hiện tại, tôi đang thực hiện theo cách này,

#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; 
} 

Tôi muốn làm điều đó trong một dòng. Tôi đã thử điều này, nhưng nó không hoạt động và nó cũng loại bỏ lề nút hủy.

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

Có cách nào để tôi có thể đạt được phong cách trong một dòng không?

Cảm ơn

Answer 1

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

tính năng này có phù hợp với bạn không?

hoặc đơn giản là:

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

Với , tách bạn bắt đầu một hoàn Selector CSS mới và kết hợp chúng.

Answer 2

thử này

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

Answer 3

Bạn cần phải tách biệt selector bằng dấu phẩy (,) trong đường dẫn có trình độ đầy đủ của mình, nếu không nó sẽ không hoạt động:

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

Answer 4

Bạn có thể làm điều đó trong một dòng, nhưng nó sẽ là hai bộ chọn. Hãy thử điều này:

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

Ngoài ra, hãy thử sử dụng # khi chọn id, đó là cách thích hợp để chọn chúng.

Answer 5

Thực hành tốt nhất cần làm là: Chỉ cần đặt tất cả id/lớp và phân tách chúng bằng dấu phẩy (,) rồi chèn kiểu tùy chỉnh của bạn trên cơ thể.

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

Hy vọng nó sẽ giúp :)