我重新定位某个页面,我无法访问所有源HTML。因此,我遗留了一些我需要移除的页面中难以定位的元素。
例如,该网页被<div style="float: left; width: 10.25px; height: 284px;"></div>
淹没。
为了摆脱它们,我在CSS中尝试了这个:
div[style="float: left; width: 10.25px; height: 284px;"] {
display:none !important;
}
我想使用CSS修复此问题,因为需要删除的HTML使用ajax进行更新。
如何在没有类或ID但具有所有这些特定样式属性的情况下定位div?
更多的源代码(花了一些时间来组织解析的源代码):
<div>
<span class="Block BigPhotoList_Block">
<span class="Photo BigPhotoList_Photo" style="height: 200px">
<a href="/Webwinkel-Product-83760187/Le-Coq-Sportif-Angers-Low.html.html">
<span style="background-image:url(http://61955.static.securearea.eu/Files/2/61000/61955/ProductPhotos/MaxContent/144036303.jpg);" class="Canvas BigPhotoList_Canvas" title="Le-Coq-Sportif-Angers-Low"></span>
</a>
</span>
<span class="Title BigPhotoList_Title">
<a href="/Webwinkel-Product-83760187/Le-Coq-Sportif-Angers-Low.html.html">
Le Coq Sportif Angers Low
</a>
</span>
<span class="Price BigPhotoList_Price" style="font-size: 120%;">
€ 89,95
</span>
</span>
<div style="float: left; width: 10.25px; height: 284px; border-right: 1px dashed #A0A0A0;" class="BigPhotoList_Stippel"></div>
<div style="float: left; width: 10.25px; height: 284px;"></div>
<span class="Block BigPhotoList_Block">
<span class="Photo BigPhotoList_Photo" style="height: 200px">
<a href="/Webwinkel-Product-83760185/Le-Coq-Sportif-Auveurne-Low.html">
<span style="background-image:url(http://61955.static.securearea.eu/Files/2/61000/61955/ProductPhotos/MaxContent/144036301.jpg);" class="Canvas BigPhotoList_Canvas" title="Le-Coq-Sportif-Auveurne-Low"></span>
</a>
</span>
<span class="Title BigPhotoList_Title">
<a href="/Webwinkel-Product-83760185/Le-Coq-Sportif-Auveurne-Low.html">
Le Coq Sportif Auveurne Low
</a>
</span>
<span class="Price BigPhotoList_Price" style="font-size: 120%;">
€ 79,95
</span>
</span>
<div style="float: left; width: 10.25px; height: 284px; border-right: 1px dashed #A0A0A0;" class="BigPhotoList_Stippel"></div>
<div style="float: left; width: 10.25px; height: 284px;"></div>
<span class="Block BigPhotoList_Block">
<span class="Photo BigPhotoList_Photo" style="height: 200px">
<a href="/Webwinkel-Product-83760191/Le-Coq-Sportif-Bordeaux-Low.html">
<span style="background-image:url(http://61955.static.securearea.eu/Files/2/61000/61955/ProductPhotos/MaxContent/144036307.jpg);" class="Canvas BigPhotoList_Canvas" title="Le-Coq-Sportif-Bordeaux-Low"></span>
</a>
</span>
<span class="Title BigPhotoList_Title">
<a href="/Webwinkel-Product-83760191/Le-Coq-Sportif-Bordeaux-Low.html">
Le Coq Sportif Bordeaux Low
</a>
</span>
<span class="Price BigPhotoList_Price" style="font-size: 120%;">
€ 99,95
</span>
</span>
<span class="Block BigPhotoList_Block">
<span class="Photo BigPhotoList_Photo" style="height: 200px">
<a href="/Webwinkel-Product-83760181/Le-Coq-Sportif-Cannet-Low.html">
<span style="background-image:url(http://61955.static.securearea.eu/Files/2/61000/61955/ProductPhotos/MaxContent/144036297.jpg);" class="Canvas BigPhotoList_Canvas" title="Le-Coq-Sportif-Cannet-Low"></span>
</a>
</span>
<span class="Title BigPhotoList_Title">
<a href="/Webwinkel-Product-83760181/Le-Coq-Sportif-Cannet-Low.html">
Le Coq Sportif Cannet Low
</a>
</span>
<span class="Discount BigPhotoList_Discount" style="font-size: 120%;">
€ 99,95
</span>
<span class="Price BigPhotoList_Price" style="font-size: 120%;">
€ 94,95
</span>
</span>
<div style="float: left; width: 10.25px; height: 284px; border-right: 1px dashed #A0A0A0;" class="BigPhotoList_Stippel"></div>
<div style="float: left; width: 10.25px; height: 284px;"></div>
<span class="Block BigPhotoList_Block">
<span class="Photo BigPhotoList_Photo" style="height: 200px">
<a href="/Webwinkel-Product-83760183/Le-Coq-Sportif-Rodez-Low.html">
<span style="background-image:url(http://61955.static.securearea.eu/Files/2/61000/61955/ProductPhotos/MaxContent/144036299.jpg);" class="Canvas BigPhotoList_Canvas" title="Le-Coq-Sportif-Rodez-Low"></span>
</a>
</span>
<span class="Title BigPhotoList_Title">
<a href="/Webwinkel-Product-83760183/Le-Coq-Sportif-Rodez-Low.html">
Le Coq Sportif Rodez Low
</a>
</span>
<span class="Price BigPhotoList_Price" style="font-size: 120%;">
€ 99,95
</span>
</span>
<div style="float: left; width: 10.25px; height: 284px; border-right: 1px dashed #A0A0A0;" class="BigPhotoList_Stippel"></div>
<div style="float: left; width: 10.25px; height: 284px;"></div>
<span class="Block BigPhotoList_Block">
<span class="Photo BigPhotoList_Photo" style="height: 200px">
<a href="/Webwinkel-Product-83760189/Le-Coq-Sportif-Sedan-Low.html">
<span style="background-image:url(http://61955.static.securearea.eu/Files/2/61000/61955/ProductPhotos/MaxContent/144036305.jpg);" class="Canvas BigPhotoList_Canvas" title="Le-Coq-Sportif-Sedan-Low"></span>
</a>
</span>
<span class="Title BigPhotoList_Title">
<a href="/Webwinkel-Product-83760189/Le-Coq-Sportif-Sedan-Low.html">
Le Coq Sportif Sedan Low
</a>
</span>
<span class="Discount BigPhotoList_Discount" style="font-size: 120%;">
€ 109,95
</span>
<span class="Price BigPhotoList_Price" style="font-size: 120%;">
€ 99,95
</span>
</span>
</div>
答案 0 :(得分:2)
如果您的div
元素总是具有某种风格,您可以使用*=
attribute selector来匹配元素的一部分{{3}} { {1}}:
style
在此示例中,如果您的div[style*="float:"] {
display: none;
}
元素总是在其div
属性中指定了float:
,则它将与以下结果匹配:
style
在理想的世界中,您只需为<div style="float: left;">
<div style="color: #f00; float: left;">
<div style="float: left; background: #f00;">
<div style="color: #f00; float: left; background: #f00;">
元素添加div
或id
即可选择:
class
<div class="myDiv">
<div id="myDiv">
答案 1 :(得分:0)
如果要在divs
阻止后隐藏.BigPhotoList_Block
,则根据提供的HTML,您可以像这样定位它们:
.BigPhotoList_Block ~ div[style*="height: 284px;"] {
display: none;
}
应该有效(demo)。
答案 2 :(得分:0)
此选择器适用于该代码片段
.BigPhotoList_Stippel + div{
display: none;
}
http://jsfiddle.net/9n9zt8pu/
+
被称为adjacent sibling comparator