Блог

Главная - Вопросы по программированию - Есть ли способ редактировать отдельные экземпляры класса в CSS?

Есть ли способ редактировать отдельные экземпляры класса в CSS?

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать стиль календаря в CSS, и я хочу, чтобы одно событие постоянно охватывало дни, на которые запланировано событие, вместо того, чтобы разбиваться по отдельности. Я свободно владею CSS, но я изо всех сил пытаюсь понять, как отредактировать это так, чтобы, например, «Событие # 1» не имело перерывов между днями, а вместо этого представляло собой одну непрерывную черную линию до последнего дня, когда оно завершено.

введите описание изображения здесь

Это то, чего я пытаюсь достичь. введите описание изображения здесь

Мой текущий код выглядит так, и это прямая ссылка на веб-сайт (это второй раздел сайта)

 <table class="spiffy calendar-table bigcal spiffy-weekly">
    <tbody>
        <tr class="calendar-heading">
            <td colspan="7" class="calendar-date-switcher">
                <table class="calendar-heading-tbl">
                    <tbody>
                        <tr>
                            <td class="calendar-prev"><a rel="nofollow" onclick="sessionStorage.scrollTop = jQuery(window).scrollTop();" href="/?preview_id=17amp;amp;preview_nonce=f0919fcc84amp;amp;_thumbnail_id=-1amp;amp;preview=trueamp;amp;daynum=06amp;amp;month=decamp;amp;yr=2020">amp;<</a>
                            </td>

                            <td class="calendar-month">December 2020</td>
                            <td class="calendar-next"><a rel="nofollow" onclick="sessionStorage.scrollTop = jQuery(window).scrollTop();" href="/?preview_id=17amp;amp;preview_nonce=f0919fcc84amp;amp;_thumbnail_id=-1amp;amp;preview=trueamp;amp;daynum=14amp;amp;month=decamp;amp;yr=2020">amp;></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr class="weekday-titles">
            <td class="normal-day-heading">Monday</td>
            <td class="normal-day-heading">Tuesday</td>
            <td class="normal-day-heading">Wednesday</td>
            <td class="normal-day-heading">Thursday</td>
            <td class="normal-day-heading">Friday</td>
            <td class="weekend-heading">Saturday</td>
            <td class="weekend-heading">Sunday</td>
        </tr>
        <tr>
            <td class="spiffy-day-07  no-events day-with-date"><span class="day-number">07</span><span class="event"></span>
            </td>
            <td class="spiffy-day-08  no-events day-with-date"><span class="day-number">08</span><span class="event"></span>
            </td>
            <td class="spiffy-day-09  day-with-date"><span class="day-number">09</span><span class="event"><span class="calnk category_1 category-bg"><span onclick="" class="calnk-link" style="color: #FFFFFF; background:#000000;"><span class="calnk-box"><a href="https://link.com" style="color: #FFFFFF; background:#000000;" target="_blank"><span class="spiffy-title">Event #1</span>
                </a><span class="spiffy-popup" style="color:#000000;"><a href="https://link.com" target="_blank"><span class="event-title" style="color:#000000;">Event #1</span><span class="event-title-break"></span><span class="ca-desc-p">Event description</span>
                </a><span class="ca-location-p">Event location</span>
                </span>
                </span>
                </span>
                </span>
                </span>
            </td>
            <td class="spiffy-day-10  day-with-date"><span class="day-number">10</span><span class="event"><span class="calnk category_1 category-bg"><span onclick="" class="calnk-link" style="color: #FFFFFF; background:#000000;"><span class="calnk-box"><a href="https://link.com" style="color: #FFFFFF; background:#000000;" target="_blank"><span class="spiffy-title">Event #1</span>
                </a><span class="spiffy-popup" style="color:#000000;"><a href="https://link.com" target="_blank"><span class="event-title" style="color:#000000;">Event #1</span><span class="event-title-break"></span><span class="ca-desc-p">Event description</span>
                </a><span class="ca-location-p">Event location</span>

                </span>
                </span>
                </span>
                </span>
                <span class="calnk category_2 category-bg"><span onclick="" class="calnk-link" style="color: #FFFFFF; background:#6d6d6d;"><span class="calnk-box"><span class="spiffy-title">Tornament</span><span class="spiffy-popup" style="color:#6d6d6d;"><span class="event-title" style="color:#6d6d6d;">Tornament</span>
                <span class="event-title-break"></span><span class="ca-desc-p">Tournament description</span>
                <span class="ca-location-p">Tournament description</span>

                </span>
                </span>
                </span>
                </span>
                </span>
            </td>
            <td class="spiffy-day-11  day-with-date"><span class="day-number">11</span><span class="event"><span class="calnk category_1 category-bg"><span onclick="" class="calnk-link" style="color: #FFFFFF; background:#000000;"><span class="calnk-box"><a href="https://link.com" style="color: #FFFFFF; background:#000000;" target="_blank"><span class="spiffy-title">Event #1</span>
                </a><span class="spiffy-popup" style="color:#000000;"><a href="https://link.com" target="_blank"><span class="event-title" style="color:#000000;">Event #1</span><span class="event-title-break"></span><span class="ca-desc-p">Event description</span>
                </a><span class="ca-location-p">Event location</span>

                </span>
                </span>
                </span>
                </span>
                <span class="calnk category_2 category-bg"><span onclick="" class="calnk-link" style="color: #FFFFFF; background:#6d6d6d;"><span class="calnk-box"><span class="spiffy-title">Tornament</span><span class="spiffy-popup" style="color:#6d6d6d;"><span class="event-title" style="color:#6d6d6d;">Tornament</span>
                <span class="event-title-break"></span><span class="ca-desc-p">Tournament description</span>
                <span class="ca-location-p">Tournament description</span>

                </span>
                </span>
                </span>
                </span>
                </span>
            </td>
            <td class="spiffy-day-12  weekend day-with-date"><span class="day-number weekend">12</span><span class="event"><span class="calnk category_1 category-bg"><span onclick="" class="calnk-link" style="color: #FFFFFF; background:#000000;"><span class="calnk-box"><a href="https://link.com" style="color: #FFFFFF; background:#000000;" target="_blank"><span class="spiffy-title">Event #1</span>
                </a><span class="spiffy-popup" style="color:#000000;"><a href="https://link.com" target="_blank"><span class="event-title" style="color:#000000;">Event #1</span><span class="event-title-break"></span><span class="ca-desc-p">Event description</span>
                </a><span class="ca-location-p">Event location</span>

                </span>
                </span>
                </span>
                </span>
                <span class="calnk category_2 category-bg"><span onclick="" class="calnk-link" style="color: #FFFFFF; background:#6d6d6d;"><span class="calnk-box"><span class="spiffy-title">Tornament</span><span class="spiffy-popup" style="color:#6d6d6d;"><span class="event-title" style="color:#6d6d6d;">Tornament</span>
                <span class="event-title-break"></span><span class="ca-desc-p">Tournament description</span>
                <span class="ca-location-p">Tournament description</span>

                </span>
                </span>
                </span>
                </span>
                </span>
            </td>
            <td class="spiffy-day-13 current-day weekend day-with-date"><span class="day-number weekend">13</span><span class="event"><span class="calnk category_1 category-bg"><span onclick="" class="calnk-link" style="color: #FFFFFF; background:#000000;"><span class="calnk-box"><a href="https://link.com" style="color: #FFFFFF; background:#000000;" target="_blank"><span class="spiffy-title">Event #1</span>
                </a><span class="spiffy-popup" style="color:#000000;"><a href="https://link.com" target="_blank"><span class="event-title" style="color:#000000;">Event #1</span><span class="event-title-break"></span><span class="ca-desc-p">Event description</span>
                </a><span class="ca-location-p">Event location</span>

                </span>
                </span>
                </span>
                </span>
                <span class="calnk category_2 category-bg"><span onclick="" class="calnk-link" style="color: #FFFFFF; background:#6d6d6d;"><span class="calnk-box"><span class="spiffy-title">Tornament</span><span class="spiffy-popup" style="color:#6d6d6d;"><span class="event-title" style="color:#6d6d6d;">Tornament</span>
                <span class="event-title-break"></span><span class="ca-desc-p">Tournament description</span>
                <span class="ca-location-p">Tournament description</span>

                </span>
                </span>
                </span>
                </span>
                <span class="calnk category_3 category-bg"><span onclick="" class="calnk-link" style="color: #FFFFFF; background:#dd3333;"><span class="calnk-box"><span class="spiffy-title">Show #1</span><span class="spiffy-popup" style="color:#dd3333;"><span class="event-title" style="color:#dd3333;">Show #1</span>
                <span class="event-title-break"></span>

                </span>
                </span>
                </span>
                </span>
                </span>
            </td>
        </tr>
    </tbody>
</table>```

Комментарии:

1. Я сделал это в css. Так ли это необходимо? — ibb.co/dM6Sh85

2. @sergeykuznetsov как ты это сделал !? да, это необходимо с точки зрения UX

3. ОК. Теперь я напишу подробный ответ.

4. Можете ли вы создать класс для этого tr тега сейчас? — ( ibb.co/kDDx4xC ) В противном случае при обращении к тегам будет очень длинный селектор.

5. @sergeykuznetsov да, я могу добавить его через javascript

Ответ №1:

Итак…

Чтобы получить эффект сплошной линии событий, вам нужно добавить этот селектор:

 .wpb_wrapper table tbody tr:nth-child(3) td:not(.no-events) .calnk.category_1 {
    margin-left: -3px;
    margin-right: -3px;
}

margin-left и margin-right расширит поля до желаемой ширины, где мне будет достаточно 3 пикселей.

Этот селектор устанавливает указанные правила для всех .calnk.category_1 , принимая во внимание исключение .no-events класса, td тега.

Если вам нужно сделать эффект сплошной полосы для всех строк, затем исключите .category_1 класс из селектора. Это должно выглядеть так:

 .wpb_wrapper table tbody tr:nth-child(3) td:not(.no-events) .calnk { ... }

На этом этапе основа проблемы решена. Но это также потребует корректировки первого и последнего блока. Это можно сделать с помощью псевдоклассов first-of-type и last-of-type . Но с этим, я думаю, вы легко справитесь 🙂

Ответ №2:

Невозможно выбрать n-й элемент по классу. Вам нужно будет использовать что-то вроде

 .weekParent div:first-of-type{}
.weekParent div:last-of-type{}

или

 .weekParent div:nth-of-type(2){}