logo标签列表

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

htmlcss
3

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

.page #buddypress ul.group li

我希望将CSS应用于所有位于ul.group类下的<li>标签。问题在于这个类也存在于侧边栏中，我不想改变侧边栏的样式。我只想将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>
3
你的HTML长什么样？如果我们不知道代码，很难知道该做什么 :-) - undefined
请在这里添加您的HTML代码。这样，我们可以更好地帮助您... - undefined
请注意，通过使用.page :not(.sidebar) #buddypress li，你是在说“选择在.page和#buddypress之间没有.sidebar类的任何元素的<li>”。根据你的HTML结构，你可以将其替换为.page :not(.sidebar) > #buddypress li等。请将代码粘贴在这里，我们可能能够提供更多帮助。 - undefined
2个回答
5

试试这段代码

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>

1
你可以通过使用元素的ID来覆盖所有的CSS样式（CSS ID会覆盖CSS类）。 一个可能的方法是：
#id{all:unset}

然而，这在浏览器上的支持有限，并且您指定的元素应该有一个ID。
另请参阅：https://dev59.com/Gm025IYBdhLWcg3wr4B6#36892781
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接