Question

我想将CSS应用于除侧边栏之外的所有页面。让我举个例子

.page #buddypress ul.group li

我想将CSS应用于<li>类子项的所有ul.group标记。这里的问题是这个类也存在于侧边栏中，我不想改变侧边栏的样式。我只想将CSS应用于页面部分，而不是侧边栏。

我除了进行某种:not(.class)操作外。

这是我想要做的事情

.page :not(.sidebar) #buddypress ul.group li

但这个技巧对我不起作用。如果有人能解决我的问题，我真的很感激。我想将CSS应用于除侧边栏之外的所有部分。

以下是我的HTML的样子：

<body>
<div id="buddypress">
<ul class="groups">
<li> </li>
</div>
<div class="sidebar">
<ul class="groups">
<li> </li>
</div>

Answer 1

试试此代码

div:not(.sidebar) ul.group li {
  border: 1px solid red;
}
// Here i have used div, but you can use whatever tag you have used for sidebar

<body class="page">

  <div class="sidebar">
    <ul class="group">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  
  <div class="page-section">
    <ul class="group">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  
</body>

Answer 2

您可以使用其ID覆盖该元素的所有css（css id覆盖css类）。可能性是：

#id{all:unset}

但是，这限制了浏览器支持，并且您指定的元素应具有ID。
另请参阅：https://stackoverflow.com/a/36892781/9204431

将css应用于除具有特定父级的人之外的所有元素

2 个答案: