Question

我正在尝试将div放在列表项中，其中树结构如下所示：

<ul>
<li>
<div class="myclass">
<a href="#">
<img />
</a>
</div>
<a href="#">
<img /> </a>
</li>
</ul>

这个列表变成了另外几个列表中的几个列表，所以你有ul的内部ul。问题是myclass div的链接样式的内容没有被css拾取，而是“li a”样式。我如何强迫它不要将两个链接和图像混合在一起？将它们放入课堂似乎不起作用。

这是css：

.myclass > a#mylink {
    width: 20px;
    height: 20px;
    display: block;
    float: right;

}

.myclass > img{
    width: 10px;
    height: 10px;
    display: block;
    float: right;
}

继续被以下方式覆盖：

ul > li ul li a {
height: 20px;
display: block;
line-height: 20px;
vertical-align: middle;
float: left;
color: #444;
font-size: 1.1em;
}

ul > li ul li img {
width: 20px;
height: 20px;
display: block;
float: left;
padding-right: 10px;
}

为了澄清这个问题，基本上，我如何保持div内容的样式起作用，而不是选择其内部的样式。

Answer 1

它可能不是您遇到的唯一问题来源（我不确定您的最终效果），但您的两个CSS规则都不正确。第一个：

.myclass > a#mylink {
    width: 20px;
    height: 20px;
    display: block;
    float: right;
}

'a #mylink'匹配id为'mylink'的'a'标签。您的文档中不存在此类标记。你可能只是指＆lt; div class =“myclass”＆gt;：

下的'a'

.myclass > a {
    width: 20px;
    height: 20px;
    display: block;
    float: right;
}

第二条规则：

.myclass > img{
    width: 10px;
    height: 10px;
    display: block;
    float: right;
}

'＆gt;'字符意味着“一个img，它紧挨着一个带有'myClass'类的元素”。但是，您的HTML在两者之间有一个“A”标记。尝试将其改为：

.myclass > a > img{
    width: 10px;
    height: 10px;
    display: block;
    float: right;
}

Answer 2

[编辑 - 以下回答原始问题，而不是编辑后的版本。我把它留在这里，因为我觉得它仍然可以为这个主题增加一些价值]

如果需要，您的CSS可能比“li a”更具体。例如，您可以使用以下结构：

<ul class="top">
    <li>
        <a> ... </a>
        <ul>
            <li>
                <a> ... </a>

如您所知，以下CSS将应用于所有“a”标记：

li a { }

但是，这个只适用于最高UL的人员：

ul.top > li > a {  }

我建议您阅读CSS中可用的选择模式;那里有各种各样的StackOverflow答案只能触及。

列表项（ul li）内的Div不断破坏样式

2 个答案: