奇怪甚至使用类而不是html标签[重复]

Question

我一直在努力寻找一种方法来更改我的偶数和奇数设置，因此它更多地依赖于类而不是 htmlstretchtur，但我完全不知所措。

下面的设置可以正常工作，但如果对 HTML 进行太多更改，它可能会中断。

（HTML 图像提供了一个简单的概述）

折叠的 HTML 版本显示 3 个 div，但 2 个 div 实际上是一组 2。

类是这样的：

学院学科块

学院栏目

学院栏目

学院学科块

最终结果是 4 个正方形，其中第一个正方形保留了它在平板电脑尺寸屏幕及以上尺寸屏幕上的图像。 接下来的 3 个将在没有图像的白色和浅灰色 bagground-color 之间交替。

---

浏览器视图中的 HTML：

HTML Viewed from browser

HTML Viewed from browser collapsed

HTML：

<div class="container academy ">
    <div class="academy-front-page">
        <div class="fullPageAdjustment">
            @Html.PropertyFor(m => m.CurrentPage.ContentArea)
        </div>
    </div>
</div>

-------------------------------------------------------------

<div class="academy-subject-block">
    
    <div class="row">
        <div class="col-xs-12">
                <div class="img-fullwidth cover-image">
                    <img src="@Url.ContentUrl(Model.CoverImage)" alt="Cover Image" class="fill-height-image min-height"/>

                    <div class="cta-turquiose-centerallign-mobile">
                        <a href="@Url.ContentUrl(Model.ButtonLink)" class="pulse animated btn bta-cta-turkuoise">
                            @Html.PropertyFor(l => l.ButtonText)
                        </a>
                    </div>
                </div>
        </div>
    </div>

    <div class="text-block-image fadeIn animated">
        @Html.PropertyFor(m =>  m.OverlayText)
    </div>
</div>

-------------------------------------------------------------

<div class="academy-column-block ">
        <div class="img-fullwidth cover-image">
            <img src="@Url.ContentUrl(Model.CoverImage)" alt="Cover Image" class="fill-height-img min-height"/>

            <div class="cta-turquiose-centerallign">
                <a href="@Url.ContentUrl(Model.ButtonLink)" class="pulse animated btn bta-cta-turkuoise">
                    @Html.PropertyFor(l => l.ButtonText)
                </a>
            </div>
        </div>
    <div class="text-block-image-column-block fadeIn animated">
        @Html.PropertyFor(m => m.OverlayText)
    </div>
</div>

SCSS：

//Pulls the section up and down as to remove any spacing
.academy-front-page {
    .fullPageAdjustment {
        @include mobile {
            position: relative;
            margin-top: -80px;
            bottom: -40px;
        }
    }

    //Removes images but keeps the size without effecting the fist image
    //And adds new text color to images that have changed
    :not(:first-child) {
        @include mobile {
            img {
                width: 0;
            }

            .text-block-image-column-block {
                color: #{$Color-DarkPurple};
            }

            .text-block-image {
                color: #{$Color-DarkPurple};
            }
        }
    }

    //Switches between background-colors of the images with exception of the fist one (Mobile only)
    div :nth-child(odd) {
        @include mobile {
            .img-fullwidth {
                background-color: #{$Color-White};
            }

            .hidden-print {
                .img-fullwidth {
                    background-color: #{$Color-WhiteSmoke};
                }
            }
        }
    }

    :nth-child(even) {
        @include mobile {
            .img-fullwidth {
                background-color: #{$Color-White};
            }

            .hidden-print {
                .img-fullwidth {
                    background-color: #{$Color-WhiteSmoke};
                }
            }
        }
    }
}

Answer 1

Afaik，目前仅使用 CSS 是不可能的。

你必须：

1. 使用 Javascript 来实现基于 CSS 类的或
2. 根据 HTML 元素使用 CSS 伪类 :nth-of-type 或 :nth-child。