Question

我有分页如何在点击其他链接时更改pagination__link的文字“左”的背景？只需要使用CSS。

Answer 1

你可以做到这一点，但坦率地说它很混乱，使用CSS灵活盒以及相对较新的:focus-within伪类。这确实需要颠倒<li>中<ul>元素的顺序：

＆＃13;

.pagination {
  /* sets the display to use the flex layout: */
  display: flex;
  /* ensures the contents of the <ul> are shown in
     columns and in reverse-order: */
  flex-direction: column-reverse;
}

/* selects first the <li> that has a focused element
   within it, then finds all subsequent <li> elements,
   using the general-sibling combinator ('~') that
   also matches the :last-child pseudo-class (there can,
   obviously, be only one) then finds the <a> element(s)
   which is a child of that <li> element: */
li:focus-within ~ li:last-child > a {
  background - color: red;
}

＆＃13;

<ul class="pagination">
  <li class="pagination__item pagination__item--active">
    <a class="pagination__link" href="#">
      Page 2
    </a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">
      Page 1
    </a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">
          left
        </a>
  </li>
</ul>

＆＃13;

External JS Fiddle demo

参考文献：

:focus-within。
flex-direction。
General Sibling Combinator (~)
＆＃34; Using CSS Flexible Boxes＆＃34; （MDN）。

Answer 2

＆＃13;

ServerChannel

＆＃13;

input[name="radio"]{
  display: none;
}
label{
  text-decoration: underline;
  color: blue;
}

input[name="radio"]:checked + label{
  background-color: yellow;
}

＆＃13;

也许它不是你想要的答案。

但我认为这可以很好地暗示你的问题。

您可以使用复选框技巧或无线电技巧。

Css通过单击其他元素更改元素的颜色

2 个答案: