Выбор класса внутри элемента: первый-ребенок

Question

Я пытаюсь сделать простой пирог, круг, разделенный на четыре части:

<ul class='pie'> 
    <li class='slice'> 
     <div class='slice-contents'></div> 
    </li> 
    <li class='slice'> 
     <div class='slice-contents'></div> 
    </li> 
    <li class='slice'> 
     <div class='slice-contents'></div> 
    </li> 
    <li class='slice'> 
     <div class='slice-contents'></div> 
    </li> 
</ul> 

У меня есть этот CSS:

.pie { 
     position: relative; 
     margin: 1em auto; 
     border: dashed 1px; 
     padding: 0; 
     width: 32em; 
     height: 32em; 
     border-radius: 50%; 
     list-style: none; 
    } 
    .slice { 
     overflow: hidden; 
     position: absolute; 
     top: 0; right: 0; 
     width: 50%; height: 50%; 
     transform-origin: 0% 100%; 
    } 
    .slice-contents { 
     position: absolute; 
     left: -100%; 
     width: 200%; height: 200%; 
     border-radius: 50%; 
    } 
    .slice:first-child { 
     transform: rotate(15deg) skewY(-90deg); 
    } 
    .slice:first-child .slice-contents { background-color: lightblue; } 
    .slice:hover .slice-contents { background-color: violet; } 

.slice:first-child .slice-contents Безразлично» t выбрать ничего, кроме .slice:hover .slice-contents.

Почему это?

Answer 1

Селектор работает нормально.

Это весь элемент, который не виден из-за преобразования, которое вы применили к нему. Удалите преобразование, и вы сразу увидите, как оно появляется, в lightblue.

---

(Так что теперь вам нужно пойти и выяснить, что правильное преобразование было бы показать элемент, куда вы хотите, чтобы это ...)