如何停止 CSS 级联或如何仅针对第 2 个 child 而不是第 3 个 CSS

Question

我有三个容器，像这样

container
  |
  + container
      |
      + container

我想通过应用 class "minisized" 缩小中间容器。但是，这也会缩小第三个容器。

是否可以仅针对第二个容器而不是第三个容器？我想将 class 添加到嵌入式或容器中，但如果可能的话不添加到单独的行中。

------------------------更新---------------- ----------

我能够使 Tarun 和 Imashcha 的回答都有效。

根据 Imashcha 的回答更新了以下代码。

------------------------更新---------------- ----------

<style type="text/css">

    .container
    {
        border-width: 10px;
        border-style: solid;
        border-color: rgb(0,0,255);

        margin: 10px;
    }

    .container .row
    {
        border-width: 2px;
        border-style: solid;
        border-color: rgb(255,128,0);
    }

    .container.minisized>.row1 { display: block;}
    .container.minisized>.row2 { display: none;}
    .container.minisized>.row3 { display: none;}
    .container.minisized>.row4 { display: none;}

</style>

<div class="container">
    <div class="row row1">row 1</div>
    <div class="row row2">row 2</div>
    <div class="row row3">row 3</div>
    <div class="embedded">
        <div class="container minisized"> <!-- "container" --> <!-- "container minisized" -->
            <div class="row row1">row 1</div>
            <div class="row row2">row 2</div>
            <div class="row row3">row 3</div>
            <div class="embedded">
                <div class="container">
                    <div class="row row1">row 1</div>
                    <div class="row row2">row 2</div>
                    <div class="row row3">row 3</div>
                    <div class="embedded">
                    </div>
                    <div class="row row4">row 4</div>
                </div>
            </div>
            <div class="row row4">row 4</div>
        </div>
    </div>
    <div class="row row4">row 4</div>
</div>

Answer 1

我认为 nth-child() 选择器可能是有趣的

Answer 2

问题是您指的是 .embedded.minisized 的所有 .rowX children。要仅访问容器的直接 children，请使用以下内容：

    .embedded.minisized>.container>.row1 { display: block;}
    .embedded.minisized>.container>.row2 { display: none;}
    .embedded.minisized>.container>.row3 { display: none;}
    .embedded.minisized>.container>.row4 { display: none;}

Answer 3

最简单的方法是添加新的 class 并相应地设置样式。

如果这不是一个选项，考虑到您的标记，您需要一些奇怪的选择器，例如：

body(assuming body is above your first container in DOM) > .container > .embedded > .container { //minisize rules }

这样您就可以按特定顺序定位直接子级您还可以将新的 class 添加到 JS 中的中间那个，但这只会让您的渲染变得不稳定。

Answer 4

css 正在应用于所有 children inside .embedded.minisized 您必须立即 child 应用 css。使用“>”css 选择器选择立即 child。使用下面的 CSS:-

        .container .embedded.minisized > .comtainer > .row1 { display: block;}
        .container .embedded.minisized > .container > .row2 { display: none;}
        .container .embedded.minisized > .container > .row3 { display: none;}
        .container .embedded.minisized > .container > .row4 { display: none;}

如何停止 CSS 级联或如何仅针对第 2 个 child 而不是第 3 个 CSS

How to stop CSS cascading or how to target only 2nd child and not 3rd with CSS

css

css-selectors