8
我想開發一個移動樣式表，並在這個樣式表中我想刪除一個特定的div。CSS - display：none;不工作
在div的HTML代碼，我把所謂的「德瑞」的ID，如下圖所示：
<div id="tfl" style="display: block; width: 187px; height: 260px; font-family: Verdana, Arial, Helvetica, sans-serif !important; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/widget-panel.gif) #fff no-repeat; font-size: 11px; border: 1px solid #103994; border-radius: 4px; box-shadow: 2px 2px 3px 1px #ccc;">
<div style="display: block; padding: 30px 0 15px 0;">
<h2 style="color: rgb(36, 66, 102); text-align: center; display: block; font-size: 15px; font-family: arial; border: 0; margin-bottom: 1em; margin-top: 0; font-weight: bold !important; background: 0; padding: 0">Journey Planner</h2>
<form action="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2" id="jpForm" method="post" target="tfl" style="margin: 5px 0 0 0 !important; padding: 0 !important;">
<input type="hidden" name="language" value="en" />
<!-- in language = english -->
<input type="hidden" name="execInst" value="" /><input type="hidden" name="sessionID" value="0" />
<!-- to start a new session on JP the sessionID has to be 0 -->
<input type="hidden" name="ptOptionsActive" value="-1" />
<!-- all pt options are active -->
<input type="hidden" name="place_origin" value="London" />
<!-- London is a hidden parameter for the origin location -->
<input type="hidden" name="place_destination" value="London" /><div style="padding-right: 15px; padding-left: 15px">
<input type="text" name="name_origin" style="width: 155px !important; padding: 1px" value="From" /><select style="width: 155px !important; margin: 0 !important;" name="type_origin"><option value="stop">Station or stop</option>
<option value="locator">Postcode</option>
<option value="address">Address</option>
<option value="poi">Place of interest</option>
</select>
</div>
<div style="margin-top: 10px; margin-bottom: 4px; padding-right: 15px; padding-left: 15px; padding-bottom: 15px; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom;">
<input type="text" name="name_destination" style="width: 100% !important; padding: 1px" value="232 Kingsbury Road (NW9)" /><select style="width: 155px !important; margin-top: 0 !important;" name="type_destination"><option value="stop">Station or stop</option>
<option value="locator">Postcode</option>
<option value="address" selected="selected">Address</option>
<option value="poi">Place of interest</option>
</select>
</div>
<div style="background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom; padding-bottom: 2px; padding-top: 2px; overflow: hidden; margin-bottom: 8px">
<div style="clear: both; background: url(http://www.tfl.gov.uk/tfl-global/images/options-icons.gif) no-repeat 9.5em 0; height: 30px; padding-right: 15px; padding-left: 15px"><a style="text-decoration: none; color: #113B92; font-size: 11px; white-space: nowrap; display: inline-block; padding: 4px 0 5px 0; width: 155px" target="tfl" href="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2?language=en&ptOptionsActive=1" onclick="javascript:document.getElementById('jpForm').ptOptionsActive.value='1';document.getElementById('jpForm').execInst.value='readOnly';document.getElementById('jpForm').submit(); return false">More options</a></div>
</div>
<div style="text-align: center;">
<input type="submit" title="Leave now" value="Leave now" style="border-style: none; background-color: #157DB9; display: inline-block; padding: 4px 11px; color: #fff; text-decoration: none; border-radius: 3px; border-radius: 3px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; font: bold 13px/1 Arial,Helvetica,sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); line-height: 1;" />
</div>
</form>
</div>
</div>
此代碼是不是地雷由TFL網站給出的這個嵌入代碼。
我想隱藏這個div，使之成爲一個移動用戶更友好的，我所做的：
#tfl {
display: none;
}
此代碼不工作，雖然我，我之前也把它應用到相應的標題和沒有工作，再次顯示：
h3.tfl {
display: none;
}
這是什麼問題？此代碼在映射圖像的另一頁上工作。 （我不能使用jQuery和JavaScript（uni assingment查看CSS））。
是在媒體查詢？您是否嘗試過使用更具體的選擇器或添加！important顯示：none？順便說一下，h3.tfl正在尋找帶有tfl類的h3。您可能是指h3 .tfl –
您是否嘗試添加可見性：隱藏到您的班級中？我通常同時使用...也許改變顏色，以確保你的風格實際上被應用。 – Tim