CSS: Định nghĩa kiểu cho các phần tử đầu vào bên trong div

Question

Tôi có một div gọi là "divContainer" bên trong mà tôi có vài yếu tố đầu vào như hộp văn bản, nút radio và .. Làm thế nào tôi có thể xác định kiểu cho sau đó trong CSS? Tôi muốn đề cập đến phong cách cho các yếu tố bên trong div.not purticular cho toàn bộ hình thức.

Ví dụ: Đối với hộp văn bản, tôi cần chiều rộng là 150px; Đối với các nút radio tôi cần chiều rộng 20px;

Answer 1

Bạn có thể xác định quy tắc phong cách mà chỉ áp dụng đối với các yếu tố cụ thể bên trong div của bạn với id divContainer như thế này:

#divContainer input { ... } 
#divContainer input[type="radio"] { ... } 
#divContainer input[type="text"] { ... } 
/* etc */ 

Answer 2

Như thế này.

.divContainer input[type="text"] { 
    width:150px; 
} 
.divContainer input[type="radio"] { 
    width:20px; 
} 

Answer 3

Khi bạn nói "được gọi", tôi sẽ giả sử bạn có nghĩa là thẻ ID.

Để làm cho nó ngang hơn, tôi sẽ không đề xuất sử dụng CSS3 [], mặc dù đây là một tùy chọn. Điều này đang được nói, cung cấp cho mỗi hộp văn bản của bạn một lớp như "tb" và nút radio "rb".

Sau đó:

#divContainer .tb { width: 150px } 
#divContainer .rb { width: 20px } 

này giả định bạn đang sử dụng các lớp học tương tự ở nơi khác, nếu không muốn nói, điều này sẽ đủ:

.tb { width: 150px } 
.rb { width: 20px } 

Như @ David đã đề cập, để truy cập vào bất cứ điều gì trong việc phân chia bản thân:

#divContainer [element] { ... } 

Trong đó [element] là bất kỳ phần tử HTML nào bạn cần.

Answer 4

CSS 3

divContainer input[type="text"] { 
    width:150px; 
} 

CSS2 thêm một lớp "text" để đầu vào văn bản thì trong css của bạn

.divContainer.text{ 
    width:150px; 
}