Как определить исключения для Третьего вхождения DIV? - PullRequest
Новая
       5

Как определить исключения для Третьего вхождения DIV?

0 голосов
/ 28 марта 2011

CSS 

#columns{
   width:100px; 
}

HTML 

<html><body>
  <div id=columns>..1..</div>
  <div id=columns>..2..</div>
  <div id=columns>..3..</div>
  <div id=columns>..4..</div>
  <div id=columns>..5..</div>
  <div id=columns>..6..</div>  
</body></html>

Теперь представьте, что я хочу определить в CSS3 конкретное правило, которое должно сделать исключение для третьего и шестого div, которое я хочу сделать 50px. есть ли другой способ (очевидно, что я создаю новое имя div, потому что я хочу сделать вещи элегантными и сделать так, чтобы все они использовали один и тот же идентификатор div.

Любые предложения о том, как решить эту проблему, очень ценятся. Спасибо!

Ответы [ 3 ]

1 голос
/ 28 марта 2011

Для браузеров, которые поддерживают псевдо-класс CSS3 nth-child: 

    <style type="text/css">
      div > div { 
        width: 100px; 
      }
      div:nth-child(3), div:nth-child(6) {
        width: 50px;
      }
    </style>

HTML: 

    <div>
      <div>..1..</div>
      <div>..2..</div>
      <div>..3..</div>
      <div>..4..</div>
      <div>..5..</div>
      <div>..6..</div>  
    </div>
1 голос
/ 28 марта 2011

Используйте псевдокласс nth-child, с 0n, чтобы он выбирал дочернего элемента без группировки. 

div:nth-child(3), div:nth-child(6) { width: 50px; }
1 голос
/ 28 марта 2011
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...