Question

这是一个用于表示我每天遇到的问题类型的示例，当我使用内容管理系统设置大量网页的HTML时，我需要一般的应用方式CSS根据模型。我想知道是否有非Javascript解决方法。

假设我有一个div类some-div，它将有1个或2个子div个。当它有1个孩子div时，该孩子应该有red个背景;当它有2个子div时，它们应该有blue个背景：

＆＃13;

    <div class="some-class">
        <div>
             <p>The background of this should be red.</p>
        </div>
    </div>
    
    <div class="some-class">
        <div>
             <p>The background of this should be blue.</p>
        </div>
        <div>
             <p>The background of this should be blue</p>
        </div>
    </div>

＆＃13;

有没有办法在CSS中执行此操作？一个黑客，也许？

Answer 1

嗯，我会塌陷。这是我的解决方案

http://jsfiddle.net/z7ajmh5z/

.some-class div {
    background: blue;
}

.some-class div:first-child:last-child {
    background: red;
}

    <div class="some-class">
        <div>
             <p>The background of this should be red.</p>
        </div>
    </div>
    
    <div class="some-class">
        <div>
             <p>The background of this should be blue.</p>
        </div>
        <div>
             <p>The background of this should be blue</p>
        </div>
    </div>

修改

显然，通过调查@LiorRaz's comment

，我找到了:only-child选择器

它有about as much support as :last-child

值得至少研究一下。这是一个嵌入式示例。

.some-class div {
  background: blue
}

.some-class div:only-child {
  background: red;
}

    <div class="some-class">
        <div>
             <p>The background of this should be red.</p>
        </div>
    </div>
    
    <div class="some-class">
        <div>
             <p>The background of this should be blue.</p>
        </div>
        <div>
             <p>The background of this should be blue</p>
        </div>
    </div>

Answer 2

你可以使用css伪FIDDLE HERE

来定位div

CSS

.some-class div:only-child
{
    background: red;
}
.some-class div:not(:only-of-type)
{
    background: blue;
}

Answer 3

支持:nth-last-of-type（ http://www.w3.org/TR/selectors/#nth-last-child-pseudo ）的现代浏览器

.some-class div{
    background-color: red;
}

.some-class div + div,
.some-class div:nth-last-child(2){
    background-color: blue;
}

http://jsfiddle.net/gaby/ofhb3hj1/

演示

Answer 4

是的，您可以使用nth-of-type执行此操作。将它们全部设置为background-color: red，然后您可以在第一个之后开始定位每个.some-class，并将div颜色覆盖为蓝色：

.some-class div{
  background-color: red;
}

.some-class:nth-of-type(1n+2) div{
  background-color: blue;
}

FIDDLE

更新ckuijjer

谁说：don't think this is a solution. The question is can you color the child <div>'s a red if there it's the only child and blue if there are two children.

是的，你可以。方法如下：

.some-class:nth-of-type(1n+2) div:first-child{
  background-color: red;
}

.some-class:nth-of-type(1n+2) div:nth-of-type(1n+2){
 background-color: blue;
}

FIDDDLE

底线是这是怎么做的，无论OP试图在他/她的解释中描绘什么，以及我或其他人是否理解他/她实际想要的东西，答案（问题标题是： Is it possible to do this with only CSS?）是：是的，它可以用CSS完成。只需要正确的等式。

Answer 5

只需将一个类添加到您想要红色的所有类中，并将一个类添加到您想要蓝色的所有类中。例如：

<div class="some-class">
    <div class="red">
         <p>The background of this should be red.</p>
    </div>
</div>

<div class="some-class">
    <div class="blue">
         <p>The background of this should be blue.</p>
    </div>
    <div class="blue">
         <p>The background of this should be blue</p>
    </div>
</div>

.blue {
background: blue;
}

.red {
background: red;
}

根据父级内的计数设置子元素

5 个答案:

修改