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除了.slice:hover .slice-contents之外没有选择任何内容。

为什么会这样？

Answer 1

选择器工作正常。

由于您应用了变换，因此整个元素不可见。删除变换，你会立即看到它出现在浅蓝色。

（所以现在你需要去弄清楚在你想要的地方显示元素的正确转换......）

选择元素内的类：first-child

1 个答案: