2009-06-03 35 views
56

Tôi tự hỏi cách bỏ qua kiểu gốc và sử dụng kiểu mặc định (không). Tôi sẽ hiển thị trường hợp cụ thể của tôi như là một ví dụ nhưng tôi khá chắc chắn đây là một câu hỏi chung.Cách bỏ qua kiểu gốc css

<style> 
#elementId select { 
    height:1em; 
} 
</style> 

<div id="elementId"> 
    <select name="funTimes" style="" size="5"> 
     <option value="test1">fish</option> 
     <option value="test2">eat</option> 
     <option value="test3">cows</option> 
    </select> 
</div> 

cách tôi không muốn giải quyết vấn đề này:

  • Tôi không thể chỉnh sửa stylesheet nơi "#elementId chọn" được thiết lập, mô-đun của tôi sẽ không có quyền truy cập đó.
  • Tốt hơn là không ghi đè kiểu chiều cao bằng thuộc tính kiểu.

Ví dụ sử dụng firebug tôi có thể tắt kiểu gốc và tất cả đều tốt, đây là hiệu ứng tôi sẽ làm.

Khi một kiểu được đặt, nó có thể bị tắt hay không, nó có bị vô hiệu không?

Trả lời

25

Nó phải được ghi đè. Bạn có thể sử dụng:

<!-- Add a class name to override --> 
<select name="funTimes" class="funTimes" size="5"> 

#elementId select.funTimes { 
    /* Override styles here */ 
} 

Bạn có thể sử dụng một bộ chọn thuộc tính, nhưng vì không được hỗ trợ bởi trình duyệt cũ (đọc IE6 vv), nó tốt hơn để thêm một tên lớp

3

bạn có thể tạo nét khác thấp hơn trong CSS stylesheet của bạn về cơ bản đảo ngược quy tắc ban đầu. bạn cũng có thể thêm "! quan trọng" để nói quy tắc để đảm bảo nó dính.

0

Nó sẽ làm cho ý nghĩa đối với CSS để có một cách khác để thêm một phong cách bổ sung (trong phần đầu trang của bạn, ví dụ, trong đó sẽ ghi đè lên các style sheet liên kết) như thế này:

<head> 
<style> 
#elementId select { 
    /* turn all styles off (no way to do this) */ 
} 
</style> 
</head> 

và tắt tất cả các kiểu đã áp dụng trước đó, nhưng không có cách nào để thực hiện điều này. Bạn sẽ phải ghi đè thuộc tính chiều cao và đặt nó thành giá trị mới trong phần đầu của các trang của bạn.

<head> 
<style> 
#elementId select { 
    height:1.5em; 
} 
</style> 
</head> 
54

Bạn có thể tắt nó đi bằng cách ghi đè nó như thế này:

chiều cao: ô tô quan trọng;

+2

Đơn giản, được giám sát một mình nhưng rất hiệu quả. Cảm ơn +1. – Ben

+2

Tôi khuyên bạn không nên sử dụng '! Important' trong đánh dấu sản xuất của mình - nó thực sự chỉ nên được sử dụng khi gỡ lỗi. – Amicable

+0

@Amicable bạn có thể giải thích lý do tại sao điều này không được khuyến khích? –

1

Tôi có tình huống tương tự khi làm việc trên trang web Joomla.

Đã thêm tên lớp vào mô-đun bị ảnh hưởng. Trong trường hợp của bạn:

<select name="funTimes" class="classname"> 

sau đó thực hiện thay đổi dòng đơn sau trong css. Đã thêm dòng

#elementId div.classname {style to be applied !important;} 

hoạt động tốt!

1

nếu tôi hiểu được một cách chính xác qeustion: bạn có thể sử dụng "tự động" trong css như width:auto này và sau đó nó sẽ quay trở lại thiết lập mặc định

1

Bạn nên sử dụng này

height: auto!quan trọng;

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