0

我正在尝试在树结构如下所示的列表项中放置一个 div：

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

这个列表变成了彼此内部的几个列表向下几个级别，所以你在 ul's 里面有 ul's。问题是 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 内容的样式正常工作，而不是拾取 li 其内部的样式。

4

2 回答 2

1

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

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

'a#mylink' 匹配 id 为 'mylink' 的 'a' 标签。您的文档中不存在此类标签。您可能只是指 <div class="myclass"> 下的“a”：

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

第二条规则：

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

'>' 字符意味着“一个 img 直接位于类 'myClass' 的元素下”。但是，您的 HTML 在两者之间有一个“A”标签。尝试将其更改为：

.myclass > a > img{
    width: 10px;
    height: 10px;
    display: block;
    float: right;
}
于 2013-07-12T14:29:26.637 回答
0

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

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

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

正如您所注意到的，以下 CSS 将应用于所有“a”标签：

li a { }

但是，这仅适用于直接在顶级 UL 之下的那些：

ul.top > li > a {  }

我建议阅读 CSS 中可用的选择模式；一个 StackOverflow 的答案只能涉及到各种各样的问题。

于 2013-07-12T14:06:09.017 回答