Добавление стилей к типу списка в CSS

Question

Я хочу добиться стиля в списке типа что-то вроде изображения ниже.Упорядоченный список с фиолетовыми числами, состоящий из неупорядоченного списка с желтыми маркерами

Но я получаю стиль, похожий на этот Мой HTML-кодУль список внутри ол.Ниже мой HTML код

        ul {
    	padding-left: 20px;
    }
    ul li {
    	list-style: none;
    	position: relative;
    	margin-bottom: 7px;
    }
    ul li:before {
    	color: #F5C400;
    	content: '\2022';
    	font-size: 1.2em;
    	position: absolute;
    	top: -.2em;
    	left: -1em;
    }
    ul li ul li:before {
    	content: '\25cB';
    }
    .nav-item:before {
    	content: '';
    	padding: 0;
    }
    ol li {
    	list-style-type: none;
    	counter-increment: list;
    	position: relative;
    }
    ol li:before {
    	content: counter(list) ".";
    	position: absolute;
    	left: -2em;
    	text-align: right;
    	color: #893579;
    }

<div class="card-body">
                                      <p>We know there are many things to consider, so ask yourself some of the following questions to help narrow down your choices.
                                          <ol>
                                              <li><b>Do you prefer to pay more out of your paycheck (premiums) and less when you get medical care or the other way around? </b></li>
                                                <ul>
                                                    <li>The Gold plan premiums are quite a bit higher, but the plan covers more of the cost when you need medical care and begins sharing the cost of your care sooner.</li>
                                                    <li>The Bronze plan premiums are the lowest, but you will pay more of your medical care costs.</li>
                                                    <li>The Silver plan is in the middle.</li>
                                                </ul>
                                              <li><b>Are you and your family generally healthy, often just getting preventive care during the year?  </b></li>
                                              <ul>
                                                  <li>Take a closer look at the Bronze plan.</li>
                                              </ul>
                                              <li><b>Does someone have a chronic condition or a potential surgery expected in 2019?</b></li>
                                              <ul>
                                                  <li>Consider the Gold and Silver plans since you know you will have significant medical expenses.</li>
                                              </ul>
                                              <li><b>Do you or a family member take prescription drugs regularly?</b></li>
                                              <ul>
                                                  <li>The Gold plan pays a higher percentage of the cost of medications.</li>
                                              </ul>
                                        </ol>
                                              You don’t have to figure it out by yourself. Visit ALEX®, your virtual benefits counselor, to help you decide which plan will work best for you and your family next year. <br>
                                      </p>
                                 </div>

Мы знаем, что нужно учесть много вещей, поэтому задайте себе несколько следующих вопросов, которые помогут сузить ваш выбор.

1. Предпочитаете ли вы платить больше из своей зарплаты (страховых взносов) и меньше, когда вы получаете медицинскую помощь или наоборот?
2. Премии плана Gold несколько выше, но план покрывает большую часть расходов, когда вам требуется медицинское обслуживание, и начинает разделять стоимость вашего обслуживания раньше.
3. Взносы Бронзового плана самые низкие, но вы будете оплачивать больше расходов на медицинское обслуживание.
4. Серебряный план находится посередине.
5. Вы и вашсемья вообще здорова, часто просто получает профилактическую помощь в течение года?
6. Внимательно посмотрите на Бронзовый план.
7. Есть ли у кого-либо хроническое заболевание или потенциальная операция, ожидаемая в 2019 году?
8. Рассмотрите планы Gold и Silver, так как вы знаете, что у вас будут значительные медицинские расходы.
9. Вы или член семьи регулярно принимаете лекарства по рецепту?
10. План Gold оплачивает более высокий процент стоимости лекарств.

Вам не нужно это выяснять самостоятельно.Посетите ALEX®, вашего консультанта по виртуальным льготам, чтобы помочь вам решить, какой план подойдет вам и вашей семье в следующем году.

Было бы здорово, если бы кто-нибудь мог мне помочь с этим. Спасибо

Answer 1

Вы очень на правильном пути, но вы должны принять во внимание тот факт, что вы вложили списки.

ul li будет применять стили к любому li в этом ul, включая те, которые находятся во вложенном списке.Поэтому вам нужно убедиться, что вы нацелены только на прямых детей, используя ul > li и ol > li.

Вот внесенные изменения:

    ul {
    	padding-left: 20px;
    }
    ul > li {
    	list-style: none;
    	position: relative;
    	margin-bottom: 7px;
    }
    ul > li:before {
    	color: #F5C400;
    	content: '\2022';
    	font-size: 1.2em;
    	position: absolute;
    	top: -.2em;
    	left: -1em;
    }
    ul li ul li:before {
    	content: '\25cB';
    }
    .nav-item:before {
    	content: '';
    	padding: 0;
    }
    ol > li {
    	list-style-type: none;
    	counter-increment: list;
    	position: relative;
    }
    ol > li:before {
    	content: counter(list) ".";
    	position: absolute;
    	left: -2em;
    	text-align: right;
    	color: #893579;
    }

<div class="card-body">
                                      <p>We know there are many things to consider, so ask yourself some of the following questions to help narrow down your choices.
                                          <ol>
                                              <li><b>Do you prefer to pay more out of your paycheck (premiums) and less when you get medical care or the other way around? </b></li>
                                                <ul>
                                                    <li>The Gold plan premiums are quite a bit higher, but the plan covers more of the cost when you need medical care and begins sharing the cost of your care sooner.</li>
                                                    <li>The Bronze plan premiums are the lowest, but you will pay more of your medical care costs.</li>
                                                    <li>The Silver plan is in the middle.</li>
                                                </ul>
                                              <li><b>Are you and your family generally healthy, often just getting preventive care during the year?  </b></li>
                                              <ul>
                                                  <li>Take a closer look at the Bronze plan.</li>
                                              </ul>
                                              <li><b>Does someone have a chronic condition or a potential surgery expected in 2019?</b></li>
                                              <ul>
                                                  <li>Consider the Gold and Silver plans since you know you will have significant medical expenses.</li>
                                              </ul>
                                              <li><b>Do you or a family member take prescription drugs regularly?</b></li>
                                              <ul>
                                                  <li>The Gold plan pays a higher percentage of the cost of medications.</li>
                                              </ul>
                                        </ol>
                                              You don’t have to figure it out by yourself. Visit ALEX®, your virtual benefits counselor, to help you decide which plan will work best for you and your family next year. <br>
                                      </p>
                                 </div>