CSS: Không thể ghi đè thừa hưởng text-decoration tài sản

Question

Tôi sẽ sử dụng bảng CSS như thế cho trình đơn của tôi:

.menu {text-decoration:underline;} 
.menu a:link {text-decoration:none; color:#0202C0} 
.menu a:active {text-decoration:none; color:#0202C0} 
.menu a:visited {text-decoration:none; color:#0202C0} 
.menu a:hover {text-decoration:underline; color:#0099FF} 

nhưng trong khi cố gắng để áp dụng nó vào các tài liệu

<span class="menu"> 
    Some underlined text came here... 
    <a href="...">this text should not be underlined until mouse on!</a> 
</span> 

tôi đã tìm thấy hành vi không mong muốn: văn bản liên kết luôn được gạch dưới. Tôi đang làm gì sai? Nó có thể phụ thuộc vào trình duyệt (tôi đang sử dụng Mozilla Firefox 3.5.6, có thể IE 6.0 hiển thị đúng cách)? Nếu vậy, làm thế nào tôi có thể dựa vào CSS? Tôi nên sử dụng cái gì để thay thế nó?

(Thực tế là tôi đã học các ngôn ngữ lập trình mới rất nhanh và không bao giờ gặp vấn đề với cơ sở lập trình cho đến khi tôi bắt đầu HTML và CSS. Hoặc tôi không tương thích với nó hoặc các tính năng của nó chưa bao giờ được kể lại đủ.)

Answer 1

Sau một vở kịch nhanh chóng với một số CSS, một workaround (đó là khủng nhưng hoạt động) sẽ được thực hiện như sau trong CSS của bạn:

.menu span {text-decoration:underline;} 

... ở vị trí của đầu tiên dòng CSS mẫu của bạn. Sau đó, trong HTML, hãy làm như sau:

<span class="menu"> 
    <span>Some underlined text came here...</span> 
    <a href="...">this text should not be underlined until mouse on!</a> 
    <span>Some more underlined text came here...</span> 
</span> 

Nó không hoàn hảo, nhưng tốt nhất là tôi có thể nghĩ ra ngay bây giờ.

Answer 2

Bạn đã thử thêm:

.menu a {text-decoration:none} 

trước tất cả các quy tắc khác? Chỉ cần thiết lập mặc định sau đó được ghi đè theo quy tắc a:hover.

Answer 3

Đảm bảo rằng đó là một liên kết hợp lệ bên trong href. Nếu bạn không cung cấp phong cách này:

.menu a, .menu a:link{my styles} 

và href không có nội dung, một số trình duyệt sẽ không đối xử với nó như một liên kết và làm mặc định việc vẽ chữ. Ví dụ: <a href=""> sẽ không theo kiểu .menu a:link, nó sẽ chuyển sang kiểu mặc định .menu vì không có liên kết và nó không được hiển thị như vậy bởi một số trình duyệt.

Tất nhiên, bao gồm các căn cứ của bạn bằng cách bao gồm dấu gạch ngang a trong bộ chọn của bạn.

Ngoài ra, hãy đảm bảo bạn kết thúc các kiểu màu đó bằng dấu chấm phẩy cho cú pháp CSS thích hợp.

Answer 4

Để văn bản bạn muốn gạch dưới, hãy sử dụng <u>blabla</u> (thực hiện theo cách HTML). Điều này sẽ không kế thừa và liên kết tiếp theo của bạn sẽ không được gạch chân.