2011-11-20 45 views
6

Trang có CSS ​​sau đây:Làm thế nào để loại bỏ tất cả các kiểu thừa kế và tính toán từ một phần tử?

input[type=text] 
{ 
    display: inline; padding: 7px; background-color: #f6f6f6; font-size: 12px; letter-spacing: 1px; border: 1px solid #aac7d1; 
    /* lots of other styles here... */ 
} 

Tôi có nhiều yếu tố văn bản đầu vào và sau đây:

<input type="text" id="txt1" /> 

Và tôi cố gắng áp dụng phong cách khác nhau để textbox này cá nhân (txt1) thông qua jQuery :

$('#txt1').removeClass().removeAttr('style').css({ 
    'background-color': '#ff0000', 
    //lots of other styles here... 
}); 

Nhưng không thể xóa các kiểu đến từ bảng định kiểu theo cách này. Quy tắc css, input[type=text] không phải là lớp tùy chỉnh để removeClass() không hoạt động ở đây, nếu tôi đúng.

Điều tôi muốn làm là; để loại bỏ hoàn toàn tất cả các kiểu được áp dụng cho phần tử txt1. Có cách nào để thực hiện việc này ngoài việc nhận danh sách tất cả các kiểu được tính toán và đặt chúng trống không?

Trả lời

2

Có cách nào để làm điều này

Không có cách nào để ngăn chặn quy tắc áp dụng cho một yếu tố nếu các trận đấu selector.

Bạn có thể

  • bộ mỗi tài sản mà bạn muốn có một giá trị cụ thể (với một selector cụ thể phù hợp và !important
  • di chuyển các yếu tố vào một tài liệu khác nhau (mà sau đó có thể được nạp với, ví Ví dụ, một iframe).
  • loại bỏ các quy tắc (và do đó gây ra nó để không áp dụng cho bất kỳ yếu tố )
  • thay đổi bộ chọn trên ruleset (vì vậy nó không phù hợp với các yếu tố nữa, y Bạn phải cẩn thận để đảm bảo rằng nó vẫn chọn các yếu tố mà bạn quan tâm)

ngoài việc nhận danh sách tất cả các kiểu tính toán và đặt chúng trống?

Điều đó sẽ không hiệu quả. Hầu hết các thuộc tính sẽ không chấp nhận một giá trị trống, vì vậy quy tắc sẽ không hợp lệ và bị bỏ qua (do đó khiến quy tắc trước đó áp dụng lại).

+0

Tôi nghĩ bạn đúng. Tôi có thể đặt lại tất cả các kiểu được tính toán, trong vòng lặp nhưng không quá logic. –

0

Như bạn có thể thấy tại liên kết này: http://www.w3.org/TR/CSS2/cascade.html#specificity, tất cả các bộ chọn có giá trị cụ thể. Vì vậy, nếu bạn viết quy tắc css như vậy: #txt1 {}, bạn có thể đặt lại tất cả các giá trị không cần thiết.

+0

cảm ơn nhưng không hoạt động .. –

+1

Tôi nghĩ rằng chúng ta cần làm rõ tình huống này. Vì vậy, nếu bạn có quy tắc như vậy: 'input [type = text] {background-color: # f6f6f6; } 'và muốn quá tải màu nền cho mục của bạn, bạn nên sử dụng quy tắc' # txt1 {background-color: # ff0000; } ' –

Các vấn đề liên quan