CSSからメディアファイルを削除した後でも、ボトムスタイリングはなぜですか？

Question

私は3つの列、名前、タイプ、ステータスがあるテーブルを持っています。それのHTMLコードは次のとおりです。

<div class="dependents"> 
    <tbody><tr> 
        <td class="cell1">Name</td> 
        <td class="cell2">Type</td> 
        <td class="cell3">Status</td> 
        <td class="cell4 last"></td> 
      </tr> 
    </tbody> 
</div> 

このテーブルのデスクトップビューは次のとおりです。

私のタスクは同じの（扶養家族と編集セクション間の）同じテーブルのモバイルビューを作ることですページには、次のように：

私は、次のCSSコードを使用して、ページのモバイルビューを作ってみました：

デスクトップのビューの10

@media screen and (max-width: 768px) 
{ 
.dependents .table.title td { 
    font-weight: bold; 
    display: inline-block; 
    width:100%; 
} 
} 

CSSコード（完全ではない）は：モバイル図に示すように、それが明確に示されて

.dependents .table.title td { 
    border-bottom: 1px solid #CCC; 
    font-weight: bold; 
} 

その名前、タイプ、および状態間のborder-bottomデスクトップビューと比較してモバイルビューに存在してはいけません。存在します。

これを達成するために、モバイルCSSコードから境界線を削除しました。ボーダーボトムラインを削除した後、私はそれがデスクトップビューのボーダーボトムを取っていると信じているので、モバイルビューでボーダーボトムセクションを見ることができます。私はそれを取り除く方法がわかりません。

Answer 1

「デスクトップビュー」はメディアクエリ内にありません。それは常に適用されます。

「モバイルビュー」はそれを補うもので、置き換えません。

border-bottomプロパティを別の値で上書きしないため、既存のルールが適用されます。

Answer 2

多分これがお手伝いします：

.dependents .table.title td { 
    border-bottom: none; 
    font-weight: bold; 
} 

またはそれがこの

.dependents .table.title td { 
    border-bottom: none!important; 
} 

Answer 3

ちょうどここのようborder-bottomの定義を追加しようと動作しない場合：あなたは、コード

@media screen and (max-width: 768px) 
{ 
.dependents .table.title td { 
    border-bottom: none; 
    font-weight: bold; 
    display: inline-block; 
    width:100%; 
} 
} 

Answer 4

すべてを「デスクトップビュー」に適用されます。

@media screen and (max-width: 768px) {} 

@mediaは「@media screen」条件を満たす場合には「デスクトップビュー」のCSSコードをオーバーライドします。

安全に再生したい場合は、両方のケースでCSSを再宣言する必要があります。

.table.title.td { 
border-bottom: 1px solid #CCC; 
} 

次にあなたがそう基本的には、コードの2枚HV

@media screen and (max-width: 768px) { 
.table.title.td { 
border-bottom: none; 
} 
} 

でそれを上書き：

.table.title.td { 
border-bottom: 1px solid #CCC; 
} 
@media screen and (max-width: 768px) { 
.table.title.td { 
border-bottom: none; 
} 
} 

重要な注意を：あなたの最後に、あなたの "モバイルビュー" のCSSを宣言cssファイル（通常の「デスクトップビュー」のCSSコードと比較して）、「デスクトップビュー」のコードが最初に来て、必要な場合にのみオーバーライドされるようにします。