如何在Sass中将一个伪选择器用于另一个伪选择器？

Question

我想用 .a-todo class 定位第一个元素，但同时不想用 .hidden class。我写了这样的东西，但是它似乎没有用。如何解决？

.a-todo:not(.hidden){
    &:first-of-type {
       border-top-right-radius: 4px;
       border-top-left-radius: 4px;
    }
}

Answer 1

也许可以使用这种方法：在所有元素上放置边框半径，然后使用 Adjacent sibling combinator.

将其删除

这个例子表明，无论 .hidden 元素位于何处，它都有效。

.a-todo {
  background: #333;
  color: white;
  padding: 3px 10px;
  display: block;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

.a-todo:not(:first-child) + .a-todo:not([class="hidden"]) {
  border-radius: 0;
}

.hidden {
  display: none;
}

<ul>
  <li class="a-todo hidden">Todo 1</li>
  <li class="a-todo">Todo 2</li>
  <li class="a-todo">Todo 3</li>
  <li class="a-todo">Todo 4</li>
</ul>

<ul>
  <li class="a-todo">Todo 1</li>
  <li class="a-todo hidden">Todo 2</li>
  <li class="a-todo">Todo 3</li>
  <li class="a-todo">Todo 4</li>
</ul>

<ul>
  <li class="a-todo">Todo 1</li>
  <li class="a-todo hidden">Todo 2</li>
  <li class="a-todo hidden">Todo 3</li>
  <li class="a-todo">Todo 4</li>
</ul>

<ul>
  <li class="a-todo hidden">Todo 1</li>
  <li class="a-todo">Todo 2</li>
  <li class="a-todo hidden">Todo 3</li>
  <li class="a-todo">Todo 4</li>
</ul>

如何在Sass中将一个伪选择器用于另一个伪选择器？

How to use one pseudo selector into another pseudo selector in Sass?

css

sass

css-selectors

pseudo-class