У меня есть <div> родительский элемент с id = "workflow". Что касается стиля .active, могу ли я узнать, как настроить таргетинг на элемент li внутри html? У меня нет проблем с первыми несколькими блоками CSS с div # workflow.

        div#workflow li {
            width: 5em;
            height: 5em;
            text-align: center;
            line-height: 5em;
            border-radius: 5em;
            background: dodgerblue;
            margin: 0 1.8em;
            display: inline-block;
            color: white;
            position: relative;
        }

        div#workflow li::before {
            content: '';
            position: absolute;
            top: 2.5em;
            left: -4em;
            width: 4em;
            height: .2em;
            background: dodgerblue;
            z-index: 1;
        }

        div#workflow li:first-child::before {
            display: none;
        }

        .active {
          background: dodgerblue;
        }

        .active ~ li {
          background: lightblue;
        }

        .active ~ li::before {
          background: lightblue;
        }


   <div id="workflow">
            <ul style="font-size:12px;">
              <li >Create</li>
              <li>Submitted</li>
              <li>In Process</li>
              <li class="active">Complete</li>
              <li>Closed</li>
            </ul> 
        </div>
0
JL_Coder 31 Май 2020 в 05:51

4 ответа

Лучший ответ
#workflow li {
      #your normal style
    }

#workflow li.active {
      #your active style
    }
1
Guillaume Serrat 31 Май 2020 в 03:16

Конечно, допустим, вы хотите настроить таргетинг только на «отправлено»

Просто сделайте это так:

#workflow > ul ::nth-child(2) {}

Посмотреть здесь. Я сделал только «представленный» красный текст.

        div#workflow li {
            width: 5em;
            height: 5em;
            text-align: center;
            line-height: 5em;
            border-radius: 5em;
            background: dodgerblue;
            margin: 0 1.8em;
            display: inline-block;
            color: white;
            position: relative;
        }

        div#workflow li::before {
            content: '';
            position: absolute;
            top: 2.5em;
            left: -4em;
            width: 4em;
            height: .2em;
            background: dodgerblue;
            z-index: 1;
        }

        div#workflow li:first-child::before {
            display: none;
        }

        .active {
          background: dodgerblue;
        }

        .active ~ li {
          background: lightblue;
        }

        .active ~ li::before {
          background: lightblue;
        }
        
        #workflow > ul :nth-child(2) {
          color: red;
        }
   <div id="workflow">
            <ul style="font-size:12px;">
              <li >Create</li>
              <li>Submitted</li>
              <li>In Process</li>
              <li class="active">Complete</li>
              <li>Closed</li>
            </ul> 
        </div>
1
John 31 Май 2020 в 03:14

Попробуйте селектор ниже.

#workflow > li {
      #your styling here
    }
1
Shiva 31 Май 2020 в 03:12

Ниже селектор будет работать:

div#workflow > ul > li.active {
  /* Styling */
}
1
yinsweet 31 Май 2020 в 03:18