主页 / 问题 / 1248213
Accepted
Dev18
Asked:2022-02-25 00:46:51 +0000 UTC2022-02-25 00:46:51 +0000 UTC

在特定条件下更改标签内容 /checked //css tree

  • 772

这些调用的顺序是什么

/*див, затем еще див и на том же уровне список (который меняет дисплей на блок если,,,) 
потом плюс див див див, который ховер (справа условия?)*/

.div.demo-list-hide div ul.hide-list+div.list-item div div.icon:hover {
  display: block;
}

.hide-list {
  display: none;
}

.icon:hover {
  background-color: green;
}
<div class="demo-list-hide">
  <div class="list-item">
    <div class="header-list-items">
      текст и подсписок
    </div>
    <div class="icon">
      иконка
    </div>
  </div>
  <ul class="hide-list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</div>

如何使用某些条件访问元素，“如果按下按钮 - 内容发生变化”

.list div.under-list-visible ul {
  display: none;
}

.list div.under-list-visible>input:checked+label+ul {
  display: block;
  margin-left: 2em;
}

ul {
  list-style: none;
}

.span-under-list2 {
  position: relative;
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 0.2em solid black;
  border-top: 0.2em solid black;
  transform: rotate(45deg);
  margin-right: 0.5em;
}


/* тут я пытаюсь обратиться к стрелке, чтобы изменить её направление, 
мне надо будет её повернуть, чтобы она смотрела вниз, 
в качестве теста я просто меняю ее цвет, 
но видимо порядок обращения к элементам нарушен, не понимаю как это работает */

.list div.under-list-visible>input:checked+label+ul+.span-under-list2 {
  border-right: 0.2em solid red;
  border-top: 0.2em solid red;
}
<ul class="list">
  <li>
    <div class="under-list-visible">
      <input type="checkbox" id="under-list2" style="display:none;" />

      <label for="under-list2">
    <span class="span-under-list2"></span>
     1 (подсписок)</label>

      <ul class="hide-list">
        <li>а</li>
        <li>б</li>
        <li>в</li>
      </ul>
    </div>
  </li>
</ul>

html

1 个回答

  1. Best Answer

    选择器！是时候学习了！我说的是最基本的选择器，以空格的形式（后代组合器）））您选择了一个标签，然后选择一个带有空格的跨度。布局很棘手，可以通过代码做得更干净，没有任何跨度，但是哦...

    .list div.under-list-visible ul {
  display: none;
}

.list div.under-list-visible>input:checked+label+ul {
  display: block;
  margin-left: 2em;
}

ul {
  list-style: none;
}

.span-under-list2 {
  position: relative;
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 0.2em solid black;
  border-top: 0.2em solid black;
  transform: rotate(45deg);
  margin-right: 0.5em;
}


/* тут я пытаюсь обратиться к стрелке, чтобы изменить её направление, 
мне надо будет её повернуть, чтобы она смотрела вниз, 
в качестве теста я просто меняю ее цвет, 
но видимо порядок обращения к элементам нарушен, не понимаю как это работает */

.list div.under-list-visible>input:checked + label .span-under-list2 {
  border-right: 0.2em solid red;
  border-top: 0.2em solid red;
}
    <ul class="list">
  <li>
    <div class="under-list-visible">
      <input type="checkbox" id="under-list2" style="display:none;" />

      <label for="under-list2">
    <span class="span-under-list2"></span>
     1 (подсписок)</label>

      <ul class="hide-list">
        <li>а</li>
        <li>б</li>
        <li>в</li>
      </ul>
    </div>
  </li>
</ul>

    • 2

相关问题