css - 选择类中的对象

标签 css css-selectors

所以,这是一个困扰我很长时间的问题。这些天我对 CSS 进行了更多的研究。我试图在这个元素中远离 jQuery,因为它在 Drupal 中,并且我试图远离自定义代码。

因此,当用户未登录时,我们有一个系统应用于 BODY 的类,称为“not-logged-in”。现在这个应该对我们来说效果很好(据我了解 CSS ),因为我们只允许管理员“登录”。当有人编辑节点时,我们会遇到冲突——在这两种情况下都会加载我们所有的自定义类,并且一些编辑控件因此看起来很时髦。

所以 BODY 样式是这样的:

<body class="html not-front not-logged-in no-sidebars page-node page-node- page-node-1 node-type-page footer-columns" >

    ... [much body content here--other divs, other classes, elements with IDs] ...

    <div class='mycustomclass'>Should be bigger if logged in</div>
</body>

所以,当我尝试添加 CSS 选择器和样式时,如下所示:

.not-logged-in .mycustomclass {
    font-size: 20px;
}

它似乎忽略了.mycustomclass。我以前也遇到过这个问题,并将其归咎于我可怜的 CSS-fu。而且总是有 jQuery,所以我真的不必关心。如果有人能为我解开这个长期的谜团,我将非常感激。

最佳答案

你的语法很好,没有问题。

我想象两个问题之一:

  1. 该类实际上并未加载到主体或 mycustomclass 元素上。在渲染源(即浏览器)中检查两者,而不仅仅是您自己的代码。由于它是 Drupal,它可能会进行缓存,因此您的更改不会被加载。 清除 Drupal 缓存

  2. 特异性。也许该元素还有另一个类,或者也许有一个全局规则。不管怎样,某些东西可能会覆盖该元素上的 CSS。

要解决这两个问题,请使用 Firebug 和 Firefox 中的 Web 开发人员工具栏。两者对于 CSS 都是必不可少的。

关于css - 选择类中的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14716167/

相关文章:

javascript - querySelectorAll 是否支持 id 中的句点 (.) 字符?

html - 如何隐藏滚动条

html - 如何为带有粘性图标的电子商务网站制作响应式标题?

javascript - 如何将子元素移动到 jQuery 中的新父元素?

css - 列表项的面包屑选择器,旁边有一个列表项

html - 如何在特定 div 内的表内选择第一个 TD

ios - CSS border-image 不显示在 iOS10 上

html - 相对于非直接父容器的绝对定位

javascript - 如何检测浏览器是否支持prefers-color-scheme

html - 具有内联样式的 CSS 伪类