2009-11-18 19 views
7

Tôi có một số mã đặt dòng trên TR cho các hàng đã xóa, nhưng điều này có nghĩa là các nút "Hành động" của tôi (chỉ có) bị ảnh hưởng. Điều này là do có các khoảng trống riêng biệt giữa các nút, điều này cũng làm cho việc truyền tải thông suốt.CSS Line-Through không bị xóa

Sau khi chọc xung quanh trên W3Schools, nó lởn vởn tôi tại sao ví dụ này không hoạt động:

<html> 
    <head> 
    <style type="text/css"> 

    tr {text-decoration:line-through} 
    </style> 
    </head> 

    <body> 
    <table> 
     <tr> 
     <td>this needs to be line-throughed</td> 
     <td style="text-decoration: none !important;">This shouldn't be line-throughed.</td> 
     </tr> 
    </table> 
    </body> 
</html> 

Làm sao tôi phải để xóa các dòng thông qua vào yếu tố con?

EDIT Tôi đã cập nhật ví dụ của tôi - vấn đề là tôi không muốn để có những phong cách tắt các yếu tố phụ huynh, chỉ là một phần tử con duy nhất.

+0

CSS không hoạt động theo cách này. 'h2' và' tr' là các thùng chứa, vì vậy bạn không thể thay đổi kiểu của chúng bằng cách thay đổi kiểu của con cái. Xem câu trả lời của Zarembisty hoặc Dmitri cho cách làm bình thường. –

Trả lời

0

Bạn không cần phải sử dụng các kiểu quan trọng hoặc nội tuyến cho việc này. Thử

h2 {text-decoration:line-through;} 
h2 span {text-decoration: none; border: 1px solid black;} 

EDIT

Trong trường hợp đó với tr kể từ yeah bạn áp dụng text-decoration đến nó, bạn phải mất text-decoration tắt cùng một nguyên tố tr không td. Nếu không làm:

tr td { text-decoration: whatever } 

và sau đó khi cần thiết

<td style="text-decoration: none;"></td> 
+0

Tôi đã làm rõ dựa trên ví dụ của tôi, nhưng làm tr td áp dụng nó cho tất cả TD, nơi tôi chỉ cần một cá nhân – JustLoren

+1

... cũng, ví dụ này không hoạt động lol – JustLoren

+0

Điểm tốt, tôi nên đặt dòng thông qua tds – JustLoren

1

Có một tương tự question một thời gian ngắn trở lại và theo câu trả lời mà bạn không thể làm những gì bạn đang cố gắng để đạt được.

EDIT: Với ví dụ của bạn, tại sao không chỉ áp dụng dòng qua TD yếu tố cá nhân

<html> 
    <head> 
    <style type="text/css"> 

    td.deleted {text-decoration:line-through} 
    </style> 
    </head> 

    <body> 
    <table> 
     <tr> 
     <td class="deleted">this needs to be line-throughed</td> 
     <td>This shouldn't be line-throughed.</td> 
     </tr> 
    </table> 
    </body> 
</html> 
+0

, tôi hy vọng câu trả lời là không ' t "lawl bạn đang lên một con lạch mà không có một mái chèo" – JustLoren

+0

nếu nghi ngờ đi với trước đó (Dmitri thắng) –

0

Dòng qua được áp dụng cho H2, vì vậy bạn phải cởi nó ra của H2.

<html> 
    <head> 
    <style type="text/css"> 

    h2 {text-decoration:line-through} 
    h2.alt { text-decoration: none; } 
    h2.alt span { border: 1px solid black; } 
    </style> 
    </head> 

    <body> 
    <h2>Line-through</h2> 
    <h2 class="alt"><span>This is heading 2, and shouldn't be line-throughed.</span></h2> 
    </body> 
</html> 

(Có thể xem ở đây: http://jsbin.com/anopa/)

Đứa trẻ (tuổi) không thể ảnh hưởng đến phong cách của phụ huynh (h2), đó là nơi mà các phong cách được áp dụng. Bạn phải thay đổi nơi áp dụng kiểu ban đầu.

Edit: cập nhật ví dụ

+0

Nhưng điều đó sẽ đánh bại mục đích, vì nó là một yếu tố con tôi cần nó loại bỏ, không phải là yếu tố cha mẹ. Phần tử cha "cần" để có nó (với thiết kế hiện tại) – JustLoren

0

Một cách để sửa lỗi này sẽ được thay

tr {text-decoration:line-through} 

để

tr td {text-decoration:line-through} 

Do vậy, dòng qua là trên cá nhân ô bảng và không phải toàn bộ hàng. Điều này cho phép bạn chỉ định một kiểu khác nhau trên một ô đơn lẻ.

BTW, vấn đề dường như không tồn tại với mã ví dụ bạn đã cung cấp trên IE5.5 +. Tuy nhiên, trong FF3.5, ví dụ này hoạt động như bạn đã giải thích. Tôi không chắc đó là hành vi chính xác thực sự.

0

Cố ý

<html> 
    <head> 
    <style type="text/css"> 

    tr td {text-decoration:line-through;} 
    tr td.noline { text-decoration:none;} 

    </style> 
    </head> 

    <body> 
    <table> 
     <tr> 
     <td>this needs to be line-throughed</td> 
     <td class="noline">This shouldn't be line-throughed.</td> 
     </tr> 
    </table> 
    </body> 
</html> 

này rằng phong cách là "tr td" cho cả hai.

-1
<td style="text-decoration: none> 

Nó hoạt động, trừ khi những gì bạn đang cố gắng vượt qua là liên kết tới URL.

Sau đó cụm từ này cũng đánh bại liên kết.

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