Вход

Просмотр полной версии : Почему не работает селектор?

Luca
21.06.2017, 14:55
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);
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 и распечатываю их на страницу в виде списков по типам
[I]boolean
translate
hidden
draggable
spellcheck
isContentEditable
isConnected
string
align
title
lang
translate
dir
hidden
...............

хотел списки "под зебру" раскрасить, а не получается - работает только селектор odd и красит все списки в своё
цвет.
почему так?
j0hnik
21.06.2017, 15:08
<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>
laimas
21.06.2017, 15:15
j0hnik,
хватит even и odd, nth-child для более сложных.
j0hnik
21.06.2017, 15:19
j0hnik,
хватит even и odd, nth-child для более сложных.
#app ul>li:nth-child(even)
laimas
21.06.2017, 15:28
j0hnik,
именно неверное указание селектора, а не псевдоселектор причина ошибки автора. При этом если у списка нет вложений, то указание дочерних тоже не требуется.
рони
21.06.2017, 15:33
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>