1

我有两个 HTML 示例...基本上信息 div 中总是有一个名称 div，但总数可能更多。

1)

<div class="person">
    <div class="info">
        <div class="name">Isabelle  of_Bavaria</div>
    </div>
</div>

2)

<div class="person">
    <div class="info">
        <div class="name">King of France Charles_V  the_Wise</div>
        <div class="title"><label>Title:</label>King of France</div>
        <div class="date"><label>Birth:</label>Jan 21st, 1337</div>
        <div class="date"><label>Death:</label>Sep 16th, 1380</div>
    </div>
</div>

我正在使用这段 CSS 在名称下添加一行，并在 person div 周围添加一个框。

.person .name
{
    position: relative;
    text-align: center;
    border-bottom: 1px dotted black;
}

.person
{
    position: relative;
    width: 250px;
    height: auto;
    border: 1px solid black;
    margin-top: 5px;
    padding: 5px;
}

我可以对 css 做些什么来防止名称在示例 1 中具有边框，同时将其留在示例 2 中而不需要额外的类或 div？

4

2 回答 2

2

尝试在.person .name条目的顶部添加这段 CSS

.person .name:only-of-type
{
    border-bottom: 0px transparent;
}

这段 CSS 意味着，如果 .person 中只有一个使用 .name 类的元素类型（在本例中为 div），则它不会有下边框。您必须将其放在.person .name之前才能覆盖它。

编辑 ：

在考虑了更多之后，我认为伪类:only-child会比:only-of-type更适合您的需求，因为它仅适用于.name是.person的唯一孩子的情况。所以这里是更新的 CSS

.person .name:only-child
{
    border-bottom: 0px transparent;
}
于 2013-08-09T16:56:32.970 回答
0

像这样的逻辑？

.person > .info[having more than one div child] > .name
{
    border-bottom: ...
}

可悲的是，我认为没有[...]像那样的选择器，但是，有“相邻的兄弟选择器”（http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors）

也许正如@PhilPerry 所建议的那样，您可以将概念更改为“在第一个孩子（或名称）之后立即在 div 上放置一个顶部边框”，如下所示：

.name:first-child + div
{
    border-top: ...
}
于 2013-08-09T16:55:55.963 回答