Question

我正在开发一个拥有手风琴的新网站（使用HTML）。在手风琴中，有一个图片库（都使用CSS和JS。我是JS的新手）。手风琴使用Unicode字符（准确地说是减号）来显示它是要打开还是关闭。

问题：图库底部的点继承了另一个类的减号。

我试图通过在css文件中将content设置为none（content: none;）来通过一个单独的类删除减号。

.active:after .test {
  content: none;
}

我将类添加到发生问题的HTML代码的相应部分：

<div style="text-align:center" class="active:after test">

此代码无效。 如何正确地创建带有选择器的类并将其添加到HTML元素中，以消除点中的“减号”？

代码段：

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("imgSlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");

    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

img {
  width: 100%;
}

* {
  box-sizing: border-box
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.imgSlides {
  display: none;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 8px;
  color: white;
  font-size: 18px;
}

.next {
  right: 0;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.dot {
  height: 15px;
  width: 15px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.active,
.dot:hover {
  background-color: #717171;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  overflow: hidden;
}

.accordion:after {
  content: '\02795';
}

.active:after {
  content: "\2796";
}

.active:after .test {
  content: none;
}

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <title> Gallerie </title>
  <link rel="stylesheet" href="./stylesheet.css">

</head>

<body>
  <div class="site-container">
    <div class="page-container">
      <button class="accordion">Pictures 1</button>
      <div class="panel">
        <div class="slideshow-container">
          <div class="imgSlides">
            <img src="https://via.placeholder.com/150?text=1">
          </div>
          <div class="imgSlides">
            <img src="https://via.placeholder.com/150?text=2">
          </div>
          <div class="imgSlides">
            <img src="https://via.placeholder.com/150?text=3">
            <div class="galerytext">placeholder</div>
          </div>
          <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
          <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>
        <div style="text-align:center" class="active:after test">
          <span class="dot" onclick="currentSlide(1)"></span>
          <span class="dot" onclick="currentSlide(2)"></span>
          <span class="dot" onclick="currentSlide(3)"></span>
        </div>
      </div>
    </div>
  </div>
  <script src="./script.js"></script>
</body>

</html>

编辑：添加了代码段。

Answer 1

您非常接近，但是CSS存在一些问题。首先，您必须在选择器中转义冒号：.active\:after（有关更多信息，请参见此question），并且需要删除该字符与.test之间的空格。有了此修复程序，您现在可以选择点父节点。从那里开始，只需选择.active:after并将其内容设置为none即可，如下所示：

.active\:after.test .active:after {
  content: none; /* Unicode character for "plus" sign (+) */
}

一种稍微简单的方法是代替上面的方法：

.dot.active:after{
  content: none;
}

如何使用CSS中的类删除继承的内容？

1 个答案: