Может ли CSS определить количество детей у элемента?

нет. Ну, не совсем. Есть несколько селекторов, которые могут приблизить вас, но, вероятно, не будут работать в вашем примере и не имеют лучшей совместимости с браузером.

:only-child

на :only-child является одним из немногих истинных селекторов подсчета в том смысле, что он применяется только тогда, когда есть один дочерний элемент родительского элемента. Используя ваш идеализированный пример, он действует как children(1) вероятно.

:nth-child

в :nth-child селектор может фактически привести вас туда, куда вы хотите пойти, в зависимости от того, что вы действительно хотите сделать. Если вы хотите, чтобы стиль всех элементов, если есть 8 детей, вам не повезло. Если, однако, вы хотите применить стили к 8-му и более поздним элементам, попробуйте следующее:

p:nth-child( n + 8 ){
    /* add styles to make it pretty */
}

к сожалению, это, вероятно, не те решения, которые вы ищете. В конце концов, вам, вероятно, придется использовать некоторое волшебство Javascript для применения стилей, основанных на подсчете-даже если вы используйте один из них, вы должны иметь жесткий взгляд на совместимость браузера, прежде чем идти с чистым решением CSS.

W3 CSS3 Spec на псевдоклассах

редактировать я прочитал Ваш вопрос немного по-другому - есть несколько других способов стиля родитель, а не дети. Позвольте мне бросить несколько других селекторов в вашу сторону:

:empty и :not

это элементы стилей, которые не имеют дети. Не то чтобы полезно само по себе, но в паре с :not селектор, вы можете стиль только элементы, которые имеют детей:

div:not(:empty) {
    /* We know it has stuff in it! */
}

вы не можете подсчитать, сколько детей доступно с чистым CSS здесь, но это еще один интересный селектор, который позволяет вам делать классные вещи.

Примечание: это решение вернет потомков наборов определенной длины, а не родительский элемент, как вы просили. Надеюсь, он еще пригодится.

Андре Луис придумал метод:http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ К сожалению, он работает только в IE9 и выше.

по существу, вы объединяете: nth-child () с другими псевдоклассами, которые имеют дело с положением элемента. Такой подход позволяет чтобы указать элементы из наборы элементов с определенными длинами.

например :nth-child(1):nth-last-child(3) соответствует первому элементу в наборе, а также является 3-м элементом с конца набора. Это делает две вещи: гарантирует, что набор имеет только три элемента и что у нас есть первый из трех. Чтобы указать второй элемент из набора трех элементов, мы будем использовать :nth-child(2):nth-last-child(2).

Пример 1 - Выберите все элементы списка, если установить имеет три элемента:

li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
    width: 33.3333%;
}

Пример 1 альтернатива от Lea Verou:

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

Пример 2-целевой последний элемент набора с тремя элементами списка:

li:nth-child(3):last-child {
    /* I'm the last of three */
}

Пример 2 вариант:

li:nth-child(3):nth-last-child(1) {
    /* I'm the last of three */
}

Пример 3-целевой второй элемент набора с четырьмя элементами списка:

li:nth-child(2):nth-last-child(3) {
    /* I'm the second of four */
}

работая с решением Мэтта, я использовал следующую реализацию Compass/SCSS.

@for $i from 1 through 20 {
    li:first-child:nth-last-child( #{$i} ),
    li:first-child:nth-last-child( #{$i} ) ~ li {
      width: calc(100% / #{$i} - 10px);
    }
  }

Это позволяет быстро расширить количество предметов.

да, мы можем сделать это, используя nth-child, как so

div:nth-child(n + 8) {
    background: red;
}

Это заставит 8-го ребенка div вперед стать красным. Надеюсь, это поможет...

кроме того, если кто-то когда-либо говорит: "Эй, они не могут быть сделаны со стилем с помощью css, используйте JS!!!- немедленно усомнитесь в них. CSS в настоящее время чрезвычайно гибкий

пример::http://jsfiddle.net/uWrLE/1/

в примере первые 7 детей синие, затем 8 и далее красные...

Если вы собираетесь сделать это в чистом CSS (используя scss), но у вас есть разные элементы/классы внутри одного родительского класса, вы можете использовать эту версию!!

  &:first-of-type:nth-last-of-type(1) {
    max-width: 100%;
  }

  @for $i from 2 through 10 {
    &:first-of-type:nth-last-of-type(#{$i}),
    &:first-of-type:nth-last-of-type(#{$i}) ~ & {
      max-width: (100% / #{$i});
    }
  }

нет, в CSS нет ничего подобного. Однако вы можете использовать JavaScript для вычисления количества детей и применения стилей.