Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.06.2017, 14:55
Аспирант
Отправить личное сообщение для Luca Посмотреть профиль Найти все сообщения от Luca
 
Регистрация: 20.06.2017
Сообщений: 69

Почему не работает селектор?
index.html
<style>
            #app>ul:nth-child(even) {
                color: cornflowerblue;
            }
            #app>ul:nth-child(odd) {
                color: coral;
            }
</style>
<div id="app"> </div>
<script src="main.js"></script>

main.js
let types = {
            sBool : '<h3>boolean</h3><ul>',
          sString : '<h3>string</h3><ul>',
      sNumber : '<h3>number</h3><ul>',
      sFunction : '<h3>function</h3><ul>',
          sObject : '<h3>object</h3><ul>'
};
let s = "<ul>";
for (let i in app){
    s += `<li>${i}</li>`;
    log(typeof app[i]);
    switch (typeof app[i]) {
        case 'boolean'  :        types.sBool     += `<li>${i}</li>`;
           case 'string'   :        types.sString   += `<li>${i}</li>`;
        case 'number'   :    types.sNumber   += `<li>${i}</li>`;
          case 'function' :     types.sFunction += `<li>${i}</li>`;
           case 'object'   :      types.sObject   += `<li>${i}</li>`;
    }

}
for (let i in types) {
    types[i] += "</ul>";
    app.innerHTML += types[i];
}


в общем получаю все свойства и методы div и распечатываю их на страницу в виде списков по типам
boolean
translate
hidden
draggable
spellcheck
isContentEditable
isConnected
string
align
title
lang
translate
dir
hidden
...............

хотел списки "под зебру" раскрасить, а не получается - работает только селектор odd и красит все списки в своё
цвет.
почему так?
Ответить с цитированием
  #2 (permalink)  
Старый 21.06.2017, 15:08
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<html>
<head>
	<meta charset="utf-8">
	<style>
            ul>li:nth-child(2n) {
                color: cornflowerblue;
            }
            ul>li:nth-child(2n+1) {
                color: coral;
            }
</style>
</head>
<body>
<ul>
<li>568975896</li>
<li>568975896</li>
<li>568975896</li>
<li>568975896</li>
<li>568975896</li>
<li>568975896</li>
<li>568975896</li>
<li>568975896</li>
<li>568975896</li>
<li>568975896</li>
</ul>
	</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 21.06.2017, 15:15
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

j0hnik,
хватит even и odd, nth-child для более сложных.
Ответить с цитированием
  #4 (permalink)  
Старый 21.06.2017, 15:19
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от laimas Посмотреть сообщение
j0hnik,
хватит even и odd, nth-child для более сложных.
#app ul>li:nth-child(even)
Ответить с цитированием
  #5 (permalink)  
Старый 21.06.2017, 15:28
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

j0hnik,
именно неверное указание селектора, а не псевдоселектор причина ошибки автора. При этом если у списка нет вложений, то указание дочерних тоже не требуется.
Ответить с цитированием
  #6 (permalink)  
Старый 21.06.2017, 15:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

Luca,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style>
#app>ul li:nth-child(even){
  color:cornflowerblue;
}

#app>ul li:nth-child(odd){
  color:coral;
}
</style>
</head>

<body>

<div id="app"> </div>
<script>

"use strict";
let types = {
            sBool : '<h3>boolean</h3><ul>',
          sString : '<h3>string</h3><ul>',
      sNumber : '<h3>number</h3><ul>',
      sFunction : '<h3>function</h3><ul>',
          sObject : '<h3>object</h3><ul>'
};
let s = "<ul>";
for (let i in app){
    s += `<li>${i}</li>`;
    //log(typeof app[i]);
    switch (typeof app[i]) {
        case 'boolean'  :        types.sBool     += `<li>${i}</li>`;
        case 'string'   :        types.sString   += `<li>${i}</li>`;
        case 'number'   :    types.sNumber   += `<li>${i}</li>`;
        case 'function' :     types.sFunction += `<li>${i}</li>`;
        case 'object'   :      types.sObject   += `<li>${i}</li>`;
    }

}
for (let i in types) {
    types[i] += "</ul>";
    app.innerHTML += types[i];
}
</script>


</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему не работает? Rora Общие вопросы Javascript 7 10.05.2017 10:09
cookie почему не работает скрипт Alven Общие вопросы Javascript 1 01.09.2013 02:17
Почему это работает? (инклуд JS в JS) Василий Б. Общие вопросы Javascript 4 11.06.2010 11:41
Помогите с javascript (Почему не работает) remus Оффтопик 9 09.06.2010 10:18
Почему не работает функция? Vitaly jQuery 10 31.07.2009 16:01