Html 如何选择以“paged-”开头，然后在不同页面上选择数字的div？_Html_Css_Sass

Html 如何选择以“paged-”开头，然后在不同页面上选择数字的div？

html css sass

Html 如何选择以“paged-”开头，然后在不同页面上选择数字的div？,html,css,sass,Html,Css,Sass,我有一个动态页面，显示多个页面，并且有一个以“paged-”开头的类以及该页面的编号。我想用SASS删除第2页及以上的div，如下所示： .paged-2, .paged-3, .paged-4, .paged-5, .paged-100{ .removeonpagetwoandso{ display: none; } } 但是我不想从paged-2写到paged-100，因为我不知道它将来会有多少页 : 编辑：添加了HTML结构第1页

我有一个动态页面，显示多个页面，并且有一个以“paged-”开头的类以及该页面的编号。我想用SASS删除第2页及以上的div，如下所示：

    .paged-2, .paged-3, .paged-4, .paged-5, .paged-100{
      .removeonpagetwoandso{
        display: none;
      }
    }

但是我不想从paged-2写到paged-100，因为我不知道它将来会有多少页

编辑：添加了HTML结构

第1页：

<body class="home"> 
 <div class="removeonpagetwoandso">Home Page 1 Only</div>
</body>

第2页等等：

<body class="home paged-2"> 
 <div class="removeonpagetwoandso">Home Page 1 Only</div>
</body>

请试试这个css

SASS编译

div[class^='paged'],
div[class*='paged-']{
  .removeonpagetwoandso{
    display: none;
    }
  }

到

就你而言

div[class^='paged-'] {
    .removeonpagetwoandso {
        display: none;
    }
}

够了。它被编译为

div[class^=paged-] .removeonpagetwoandso {
  display: none;
}

也就是说具有removeonpagetwoandso类且其类以paged-开头的元素的子元素。我认为你的html结构有问题。您的HTML必须如下所示：

<div class="paged-1">
    <div class="removeonpagetwoandso">
        paged-1
    </div>
</div>
<div class="paged-2">
    <div class="removeonpagetwoandso">
        paged-2
    </div>
</div>
<div class="paged-3">
    <div class="removeonpagetwoandso">
        paged-3
    </div>
</div>
<div class="paged-4">
    <div class="removeonpagetwoandso">
        paged-4
    </div>
</div>
<div class="paged-5">
    <div class="removeonpagetwoandso">
        paged-5
    </div>
</div>
<div class="paged-100">
    <div class="removeonpagetwoandso">
        paged-100
    </div>
</div>

鉴于这些选择器是有效的，您需要提供一个可验证的示例，下面是操作方法：请检查我的更新答案，现在我可以看到您的HTML，我发现了问题。我已经添加了我的HTML结构。.paged-2类实际上位于body标记内。.removeonpagetwoandso类位于HTML的主体内。每一页，.page-*都会更改其编号。

div[class^='paged-'] {
    .removeonpagetwoandso {
        display: none;
    }
}

div[class^=paged-] .removeonpagetwoandso {
  display: none;
}

<div class="paged-1">
    <div class="removeonpagetwoandso">
        paged-1
    </div>
</div>
<div class="paged-2">
    <div class="removeonpagetwoandso">
        paged-2
    </div>
</div>
<div class="paged-3">
    <div class="removeonpagetwoandso">
        paged-3
    </div>
</div>
<div class="paged-4">
    <div class="removeonpagetwoandso">
        paged-4
    </div>
</div>
<div class="paged-5">
    <div class="removeonpagetwoandso">
        paged-5
    </div>
</div>
<div class="paged-100">
    <div class="removeonpagetwoandso">
        paged-100
    </div>
</div>