如何在没有类或id但具有所有这些特定样式属性的情况下定位div

时间:2014-08-20 09:51:48

标签: jquery html css dom

我重新定位某个页面,我无法访问所有源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>

3 个答案:

答案 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;"> 元素添加divid即可选择:

class
<div class="myDiv">
<div id="myDiv">

答案 1 :(得分:0)

如果要在divs阻止后隐藏.BigPhotoList_Block,则根据提供的HTML,您可以像这样定位它们:

.BigPhotoList_Block ~ div[style*="height: 284px;"] {
    display: none;
}

应该有效(demo)

了解general sibling selector

答案 2 :(得分:0)

此选择器适用于该代码片段

 .BigPhotoList_Stippel + div{
    display: none;
}

http://jsfiddle.net/9n9zt8pu/ +被称为adjacent sibling comparator