Почему не работает селектор?
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 и красит все списки в своё цвет. почему так? |
<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> |
j0hnik,
хватит even и odd, nth-child для более сложных. |
Цитата:
#app ul>li:nth-child(even) |
j0hnik,
именно неверное указание селектора, а не псевдоселектор причина ошибки автора. При этом если у списка нет вложений, то указание дочерних тоже не требуется. |
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> |
Часовой пояс GMT +3, время: 17:48. |