时间戳

首页 > 解决方案 > How do I remove inherited content using classes in CSS?

html - How do I remove inherited content using classes in CSS?

问题描述

I am working on a new website (used HTML) which has an accordion. In the accordion, there is an image gallery (both use CSS & JS. I am new to JS). The accordion uses Unicode characters (minus to be precise) to display whether it's going to open or close.

Problem: The dots at the bottom of the gallery inherit the minus character from another class.

I've tried to remove the minus by a separate class by setting specifically the content to none (content: none;) in the css-file.

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

I added the class to the corresponding part of HTML code where the problem occurs:

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

This code doesn't work. How do I properly create a class with selectors and add it to the HTML-element to remove the 'minus' from the dots?

Snippet of code:

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>

EDIT: Added snippet.

标签： htmlcss

解决方案

You were very close but your CSS had a couple of issues. First, you have to escape the colon in your selector: .active\:after (see this question for more info) and you needed to remove the space between that and .test. With this fix, you are now selecting the dots parent node. From there is is just a matter of selecting the .active:after and setting its contents to none like this:

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

A slightly simpler approach would be to do this in place of the above:

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

推荐阅读