Tôi làm cách nào để hủy một thuộc tính CSS?

Question

Trang tôi đang làm việc trên có nhiều tệp CSS khác nhau được đính kèm với nó, một tệp boostrap.css, tệp master.css và tệp custom.css.

Tôi đang cố gắng xóa thuộc tính vì tôi không muốn có thuộc tính a: hover trên liên kết trong menu. Các tập tin tổng thể CSS có

#topSurround a:hover { 
    color: #ffffff; 
} 

các bootstrap file CSS có

.nav > li > a:hover { 
    text-decoration: none; 
    background-color: #eee; 
} 

Tôi không muốn chỉnh sửa những tập tin này, vì chúng là các tập tin lõi với mẫu Tôi đang sử dụng và có thể được cập nhật, vì vậy tôi đang sử dụng tệp CSS tùy chỉnh. Thông thường, tôi sẽ đặt thuộc tính là mặc định để ghi đè mọi lần sử dụng trước đó của thuộc tính.

#topSurround a:hover { 
    color: none; (doesn't work, as this isn't the correct default) 
} 

Vì vậy, hai câu hỏi: Giá trị mặc định cho thuộc tính màu (dường như không có gì)? Có một cách dễ dàng hơn để đi về điều này mà không cần phải ghi đè lên các tập tin lõi?

Answer 1

Bạn có thể sử dụng color: inherit để có màu sử dụng giá trị từ tổ tiên của nó. color là lẻ ở chỗ nó có giá trị mặc định khác nhau tùy thuộc vào ngữ cảnh. Một liên kết, ví dụ, thường sẽ mặc định là màu xanh, trong khi văn bản sẽ mặc định là màu đen.

Nếu bạn cần ghi đè kiểu hiện có, không sử dụng công cụ chọn cụ thể hơn. Nâng cao specificity có nghĩa là bạn sẽ chỉ phải sử dụng nhiều bộ chọn hơn vào lần tiếp theo bạn muốn ghi đè lên.

Thay vào đó, tận dụng lợi thế của thác bằng cách sử dụng một bộ chọn với đặc hiệu giống hệt nhau và làm cho ghi đè xảy ra sau kiểu gốc:

/* older style in some library */ 
.foo .bar .baz { 
    color: blue; 
} 

...in an overriding CSS file... 

.foo .bar .baz { 
    color: green; 
} 

Answer 2

Cách tốt nhất là để thực hiện một cụ thể hơn quy tắc CSS, chẳng hạn như:

body #topSurround a:hover { 
    color: transparent; 
} 

đặc hiệu là một khái niệm CSS quan trọng, như mô tả trong bài viết này:

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 3

Mỗi phong cách CSS có một giá trị mặc định tự nhiên. Nó không chỉ luôn là none.

Một số có thể là 0 (như bằng không).

Một số có thể là auto.

Đôi khi inherit là tùy chọn tốt nhất.

Màu sắc có thể được đặt thành transparent.

Nếu bạn không chắc chắn về mặc định là gì, hãy thử tạo một trang giả với chỉ một phần tử không cố định và sử dụng các công cụ trình duyệt để xem các kiểu được đặt thành.

Answer 4

tôi khuyên bạn nên cố gắng:

#topSurround a:hover { 
    color: inherit; 
} 

Đối với làm thế nào để ghi đè lên những gì Bootstrap sẽ bổ sung, tôi nghĩ như thế nào bạn đã làm nó là tốt nhất.

Answer 5

Để hủy thuộc tính, bạn có thể sử dụng unset từ khóa.

Vì vậy, trong bạn tùy chỉnh tập tin css bạn có thể làm một cái gì đó như sau: -

#topSurround a:hover { 
    color: unset; 
} 

Theo Documents MDN Web: -

Từ khóa CSS unset reset một tài sản để thừa hưởng của nó giá trị nếu nó kế thừa từ gốc của nó và đến số initial value nếu không. Nói cách khác, nó hoạt động giống như từ khóa inherit trong trường hợp đầu tiên và giống như từ khóa initial trong trường hợp thứ hai. Nó có thể được áp dụng cho bất kỳ thuộc tính CSS nào, bao gồm cả viết tắt CSS tất cả.