在Javascript中，子节点受其父节点的影响

我正在通过学习youtube制作一个图像滑块。一切都很顺利，但我对一个问题很好奇。您知道，在滑块中有两个按钮（上一个按钮和下一个按钮）。我写了一段代码

container.animate（[{opacity:'0.1'}，{opacity:'1'}]，{duration:1000，fill:'forwards'}）

这段代码很好，很好，很漂亮，但它也会影响按钮。我不希望这种事发生

我尝试添加
按钮在函数中

<div class="images">
    <button id="previous" type="button">Prev</button>
    <button id="next" type="button">Next</button>
</div>


const prevButton = document.querySelector('#previous');
const nextButton = document.querySelector('#next');
const container = document.querySelector('.images');
const buttons = prevButton && nextButton;

let counter = 0;

prevButton.addEventListener('click', prev);
nextButton.addEventListener('click', next);

function next(){
    container.animate([{opacity:'0.1'}, {opacity:'1'}], {duration: 1000, fill:'forwards'});
    counter++;
    while(counter > 4){
    counter = 0;
    }
    container.style.background = `url(images/image${counter}.jpg)center/cover no-repeat`;
}

function prev(){
    container.animate([{opacity:'0.1'}, {opacity:'1'}], {duration: 1000, fill:'forwards'});
    counter--
    while(counter < 0){
        counter = 4;
    }
    container.style.background = `url(images/image${counter}.jpg)center/cover no-repeat`;

}


上
下一个
const prevButton=document.querySelector（“#previous”）；
const nextButton=document.querySelector（'next'）；
const container=document.querySelector（'.images'）；
const buttons=prevButton&&nextButton；
设计数器=0；
prevButton.addEventListener（“单击”，prev）；
addEventListener（“单击”，下一步）；
函数next（）{
动画（[{opacity:'0.1'}，{opacity:'1'}]，{duration:1000，fill:'forwards'}）；
计数器++；
同时（计数器>4）{
计数器=0；
}
container.style.background=`url（images/image${counter}.jpg）center/cover no repeat`；
}
函数prev（）{
动画（[{opacity:'0.1'}，{opacity:'1'}]，{duration:1000，fill:'forwards'}）；
柜台--
while（计数器<0）{
计数器=4；
}
container.style.background=`url（images/image${counter}.jpg）center/cover no repeat`；
}
正如@gugateider所说，如果您不希望按钮受到.images上动画的影响，我会将它们移出该容器，如下所示：

<div class="slider">
    <button id="previous" type="button">Prev</button>
    <button id="next" type="button">Next</button>
    <div class="images">
    </div>
</div>


上
下一个

然后，您可以在不影响按钮任何内容的情况下设置.images的动画。
正如@gugateider所说，如果您不希望.images上的动画影响按钮，我会将其移出该容器，如下所示：

<div class="slider">
    <button id="previous" type="button">Prev</button>
    <button id="next" type="button">Next</button>
    <div class="images">
    </div>
</div>


上
下一个

然后，您可以在不影响按钮的情况下设置.images的动画。
不透明度将影响每个子元素。发件人：

opacity
应用于整个元素，包括其内容，即使该值不是由子元素继承的。因此，元素及其子元素相对于元素的背景都具有相同的不透明度，即使它们彼此具有不同的不透明度

由于
opacity
不是继承的，因此将
opacity:1
应用于子对象将不会执行任何操作，因为您不会重置继承的值

我喜欢把正在发生的事情看作一个过滤器

我建议将单个幻灯片的上一个和下一个元素移出容器。许多滑块的结构与此类似：



上
下一个
不透明度将影响每个子元素。发件人：

opacity
应用于整个元素，包括其内容，即使该值不是由子元素继承的。因此，元素及其子元素相对于元素的背景都具有相同的不透明度，即使它们彼此具有不同的不透明度

由于
opacity
不是继承的，因此将
opacity:1
应用于子对象将不会执行任何操作，因为您不会重置继承的值

我喜欢把正在发生的事情看作一个过滤器

我建议将单个幻灯片的上一个和下一个元素移出容器。许多滑块的结构与此类似：



上
下一个
如果向父级添加样式，则会影响子级，除非该子级将相同元素附加到不同的样式中。是否确实需要在
.images
容器中包含按钮？它们应该在外面，因为那个容器应该只用来保存图像，你的代码会工作得很好。@gugateider我按照你说的做了，现在我很快就成功了（我是初学者）。但是javascript中有没有一种方法可以阻止这一点，我们可以将父元素和子元素分开吗？我只是想知道。你试过把你的按钮放在绝对位置吗？@Luca Spezzano是的，我试过了。当我在html中分离div和button元素时，它起作用了。如果您向父级添加样式，它将影响子级，除非子级将相同的元素附加到不同的样式中。是否确实需要将按钮放在
.images
容器中？它们应该在外面，因为那个容器应该只用来保存图像，你的代码会工作得很好。@gugateider我按照你说的做了，现在我很快就成功了（我是初学者）。但是javascript中有没有一种方法可以阻止这一点，我们可以将父元素和子元素分开吗？我只是想知道。你试过把你的按钮放在绝对位置吗？@Luca Spezzano是的，我试过了。当我在html中分离div和button元素时，它起作用了。