Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS проблема с селекторами / 5 сообщений из 5, страница 1 из 1
25.06.2014, 00:49
    #38679126
alex021
alex021
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS проблема с селекторами
Доброй ночи!
есть некая табличка, в которой есть еще одна табличка, вот так нкипример
 
табличка
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
        <table class="mainTable">
            <tr>
                <th>Заголовок 1</th>
                <th>Заголовок 2</th>
            </tr>
            <tr>
                <td> что-то</td>
                <td>
                    <table class="anotherTable">
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                   
                    </table>

                </td>
            </tr>
        </table>


есть CSS в котором я хочу чтобы строки таблицы mainTable меняли цвет , если они четные, ни у заголовков в фоне был другой цвет.
пишу вот такой СSS c селекторами.
 
СSS

Код: css
1.
2.
3.
4.
5.
6.
.mainTableЮtr:nth-child(2n){
    background: #f0f0f0; /* Цвет фона четной строки*/
}
.mainTable>th{
    background: gray; /* Цвет фона  заголовка*/
}


вроде все просто, но не работает. иногда целяет строки из таблицы anotherTable и меняет их цвет, хотя не должно вроде. заголовок вообще не цепляет. =( в чем проблема? заранее благодарен за ответ.

PS
таблица mainTable значительно больше и вложенная таблица anotherTable бывает разного размера.
+ намешаны теги jsp. может быть это как-то влияет? хотя я очень сомневаюсь.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.06.2014, 01:01
    #38679130
alex021
alex021
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS проблема с селекторами
извиняюсь вот эта строка неточна:
" иногда целяет строки из таблицы anotherTable и меняет их цвет, хотя не должно вроде"
цепляло, когад был вот такой вариант селектора .mainTable tr:nth-child(2n){..}.
тут понятно почему так работает. но когда заменил пробел на знак ">" перестал работать
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.06.2014, 01:18
    #38679138
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS проблема с селекторами
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
<!DOCTYPE html>
<html>  
<head>
  <style>
    table.mainTable {
      width: 100%;
      /* Ширина таблицы */
      border-spacing: 0;
      /* Расстояние между ячейками */
    }
    table.mainTable tr:nth-child(2n) {
      background: #f0f0f0;
      /* Цвет фона */
    }
    table.mainTable tr:nth-child(1) {
      background: #666;
      /* Цвет фона */
      color: #fff;
      /* Цвет текста */
    }
    table.mainTable .anotherTable tr {
      background-color: inherit;
      color: inherit;
    }
  </style>
</head>  
<body>
  <table border="1" class="mainTable">
    <tr>
      <th>&nbsp;</th><th>2134</th><th>2135</th><th>2136</th><th>2137</th><th>2138</th>
    </tr>
    <tr>
      <td>Нефть</td><td>16</td><td>34</td><td>62</td><td>74</td><td>57</td>
    </tr>
    <tr>
      <td>Золото</td><td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
    </tr>
    <tr>
      <td>Дерево</td><td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
    </tr>
    <tr>
      <td>Камни</td><td>23</td><td>34</td><td>88</td><td>53</td>
      <td>
        <table class="anotherTable">
          <tr>
            <td>103</td><td>103</td>
          </tr>
          <tr>
            <td>103</td><td>103</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.06.2014, 15:33
    #38679914
alex021
alex021
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS проблема с селекторами
skyANA, спасибо, проблема решена!
только...
table.mainTable tr:nth-child(2n+1) {
....
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.06.2014, 16:25
    #38680018
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS проблема с селекторами
alex021, тогда уж
Код: css
1.
2.
3.
table.mainTable tr:nth-child(odd) {
  /* ... */
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS проблема с селекторами / 5 сообщений из 5, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 324ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1446957]:
 0ms
get settings:
 5ms
get forum list:
 15ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 31ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 30ms
get tp. blocked users:
 1ms
others: 223ms
total:  324ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]