Question

我从来没有像.class1 + .class2 {}这样的Class声明。我需要使用Js来操纵padding-top属性。

CSS

.sticky + .content {
  padding-top: 150px;  
}

这就是我在Js中尝试过的方法。我想做那个padding top -150px。我需要能够动态更改它。没用我的错误在哪里？

JS

var myElements = document.querySelectorAll(".content"+".sticky");
  for (var i = 0; i < myElements.length; i++) {
    myElements[i].style.paddingTop = -150 +"px";;
    myElements[i].style.sticky = -150 +"px";;
}

Answer 1

CSS中的a + b选择器意味着HTML DOM中元素b之后的元素a。如果这确实是您想要的，那么您的JS代码行中有错误：

var myElements = document.querySelectorAll(".content"+".sticky");

".content"+".sticky"的计算结果为".content.sticky"，这意味着一个元素应同时具有类.content和.sticky。

尝试使用此功能：

var myElements = document.querySelectorAll(".content + .sticky");

此外，CSS中的加号选择器不是可交换的，因此.content + .sticky（内容元素紧随粘性元素）和.sticky + .content（内容元素紧随内容元素）是不同的选择器。确保在CSS和JS中使用相同的选择器。

但是，如果要匹配具有两个类.content和.sticky的单个元素，则CSS出错。

在这种情况下，您需要将.sticky + .content { ... }更改为.sticky.content { ... }

此行也是无效的：

myElements[i].style.sticky = -150 +"px";;

CSS3中没有sticky属性。

也许您想向元素添加sticky类？可以这样做：

myElements[i].classList.add('sticky');

Answer 2

使用文字+而不是连接字符串：

.content + .sticky

尽管这会选择同级-您可能只需要一个简单的多类选择器字符串，在这种情况下，您将使用逗号。

.content, .sticky

Answer 3

如果元素具有两个类，则不能使用空格使规则仅适用：

.sticky.content {
  padding-top: 150px;  
}

对于JS，您将执行以下操作：

var myElements = document.querySelectorAll(".content.sticky");

如果内容是粘性的直接子元素，请使用：

.sticky > .content

或者如果只是孩子或孙子，请使用

.sticky .content

如果内容是粘性的下一个兄弟姐妹，请使用：

.sticky + .content

如何操作类似（class1 + class2）的类

3 个答案: