Порядок в nth-child
Не понимаю почему обводка применилась не к текст 2 а ко второму блоку
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>index</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.wraper {
margin: 0 auto;
width: 320px;
}
.block1 {
height: 50px;
background-color:azure;
margin: 10px 0px 10px 0px;
}
.block2 {
height: 50px;
background-color:azure;
margin: 10px 0px 10px 0px;
display: flex;
align-items: center;
}
.block2:nth-child(2){
border: 1px dashed tomato;
}
.text1 {
width: 140px;
}
.text2 {
width: 140px;
}
.block3 {
height: 50px;
background-color:azure;
margin: 10px 0px 10px 0px;
}
.block4 {
height: 50px;
background-color:azure;
margin: 10px 0px 10px 0px;
}
</style>
</head>
<body>
<div class="wraper">
<div class="block1"></div>
<div class="block2">
<div class="text1">Текст1</div>
<div class="text2">Текст2</div>
</div>
<div class="block3"></div>
<div class="block4"></div>
</div>
</body>
</html>
|
.block2:nth-child(2)
Это не второй ребенок блока с классом .block2, а блок с классом .block2, который является вторым ребенком у своего родителя. Если нужен второй ребенок у блока .block2 То .block2>:nth-child(2) |
voraa,
Спасибо А почему если я запишу так .block2 :nth-child(2) Это тоже сработает |
Цитата:
" " - ищет любых потомков, включая детей .block2 :nth-child(2) - любой потомок .block2, который является вторым ребенком у своего родителя. div.text2 - тоже подходит. Если, например написать .wraper :nth-child(2), то подойдут и div.block2 и div.text2 |
voraa,
Спасибо |
| Часовой пояс GMT +3, время: 15:39. |