[/g0]
в изображении из добавленных 10 элементов, 8 являются <p>
и 2 являются <i>
, два затененных элемента детали указывают <i>
, оставшиеся восемь <p>
css для страницы идет здесь:
<style>
* {
padding: 0;
margin:0;
}
section p {
width: 20px;
height: 20px;
border:solid 1px black;
border-radius: 15px;
margin:20px;
float: left;
}
section i {
width: 20px;
height: 20px;
border:solid 1px black;
border-radius: 15px;
margin:20px;
float: left;
}
section p:nth-child(1) {
background-color: green; /*first-child of p in the flow*/
}
section i:nth-child(1) {
background-color: red; /*[first-child of i in the flow]NO */
}
section i:nth-of-type(1) {
background-color: blue; /*the type i of first child in the flow*/
}
</style>
</head>
<body>
<section>
<p></p>
<p></p>
<p></p>
<p></p>
<i></i>
<p></p>
<i></i>
<p></p>
<p></p>
<p></p>
</section>
</body>
первая зеленая лампочка указывает
section p:nth-child(1) {
background-color: green; /*first-child of p in the flow*/
}
и вторую красную лампу в код не работает, потому что i не является первым элементом в потоке
section i:nth-child(1) {
background-color: red; /*[first-child of i in the flow]NO */
}
, а синяя лампочка на рисунке указывает первый тип i в потоке
section i:nth-of-type(1) {
background-color: blue; /*the type i of first child in the flow*/
}