Question

一旦知道父＆gt; div CSS选择器在IE中无法识别，我就会重新编码我的CSS样式，例如：

div#bodyMain div#paneLeft>div{/*styles here*/}

到此：

div#bodyMain div#paneLeft div[id|="subPane"]{/*styles here*/}

这是我的html代码段：

<div id="bodyMain">
        <div id="paneLeft">
            <div id="subPaneCategory">
                <p id="subPaneTitle">Shop Item Categories</p>
                <!--other html here -->
</div></div</div>

问题是我/ 这里的样式 /现在在Mozilla中不起作用。我在元素[attribute | =“value”]的用法中需要知道些什么吗？感谢

Answer 1

管道（|=）用于匹配带连字符的值。 IE可能会忽略管道，而在Mozilla中，你的样式不再起作用，因为它尊重管道，但是它与你的标记（没有连字符）不匹配。

^ =运算符匹配“StartsWith”值，$ =匹配“EndsWith”。我很确定这些都不被IE认可。如果您需要跨浏览器支持，通常最安全的是坚持：

ele
#id
.class
（空间）后裔
还有一些其他有限的内容，例如:hover

a

这就是它。谢谢IE：）

Answer 2

为什么不直接使用CSS类？

<div id="bodyMain">
    <div id="paneLeft">
        <div id="subPaneCategory" class="subpane">
            <p id="subPaneTitle" class="subpane">...</p.
        </div>
    </div>
</div>

然后你的CSS很简单并且跨浏览器：

#paneLeft div.subpane {
    /* whatever */
}

另请注意，使用2个ID的CSS选择器没有意义（除非您需要它来增加特异性）。也就是说：div#bodyMain div#paneLeft可以重写为#paneLeft。

CSS div [id | =“subPane”]错误

2 个答案: