不是：第一个孩子适用于所有元素而不适用于第一个元素

时间：2017-12-27 08:02:53

标签： javascript html css

这是简单的js画廊。我使用not:first-child只显示一页加载的一张照片。但它并没有隐藏其他照片。链接：http://liebeundsprueche.com/kaley-cuoco-nackt/（部分照片为+18）

我的目标是在加载页面时隐藏所有照片，而无需先隐藏所有照片。单击按钮后，它应该显示下一个或正常情况下pphotos。我不明白我写的是syntaxicali或逻辑错误。 JS工作，但不是。 

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "inline";
}
.mySlides not:first-child {
  display: none !important;
}
<div class="btt"><button class="w3-button" onclick="plusDivs(-1)">❮ Prev</button> <button class="w3-button" onclick="plusDivs(1)">Next ❯</button></div>
<div class="w3-content">

  <div><img class="mySlides" src="/wp-content/images/1.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/2.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/3.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/4.jpg" alt=Kaley Cuoco nackt ""></div>
  <div><img class="mySlides" src="/wp-content/images/5.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/6.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/7.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/8.jpg" alt=Kaley Cuoco nackt ""></div>
  <div><img class="mySlides" src="/wp-content/images/9.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/10.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/11.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/12.jpg" alt=Kaley Cuoco nackt ""></div>
  <div><img class="mySlides" src="/wp-content/images/13.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/14.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/15.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/16.jpg" alt=Kaley Cuoco nackt ""></div>
  <div><img class="mySlides" src="/wp-content/images/17.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/18.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/19.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/20.jpg" alt="Kaley Cuoco nackt "></div>
  <div><img class="mySlides" src="/wp-content/images/21.jpg" alt="Kaley Cuoco nackt "></div>
  <div><img class="mySlides" src="/wp-content/images/22.jpg" alt="Kaley Cuoco nackt "></div>

</div>

4 个答案:

答案 0 :(得分：0)

首先你的语法有错误，第二个是逻辑错误。您可能会注意到.mySlides位于div内，因此他们不是同一父母的孩子，所以第一个孩子会触发所有。你还需要删除!important或者JS代码不会工作，因为!important将具有更优先的内联风格。

所以你需要在同一个div中创建它们（它们应该有相同的父级）并更正CSS语法和:not()这样：

＆＃13;
＆＃13; 
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "inline";
}
＆＃13; 
.mySlides:not(:first-child) {
  display: none;
}
＆＃13; 
<div class="btt"><button class="w3-button" onclick="plusDivs(-1)">❮ Prev</button> <button class="w3-button" onclick="plusDivs(1)">Next ❯</button></div>
<div class="w3-content">

  <div><img class="mySlides" src="https://lorempixel.com/400/400/" alt="Kaley Cuoco nackt"><img class="mySlides" src="https://lorempixel.com/400/420/" alt="Kaley Cuoco nackt">
    <img class="mySlides" src="https://lorempixel.com/420/400/" alt="Kaley Cuoco nackt">
    <img class="mySlides" src="https://lorempixel.com/420/420/" alt=Kaley Cuoco nackt ""></div>

</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

这里有一些问题。

首先，您要确定.mySlides是否是第一个孩子。但是，每个.mySlides元素都在一个div中，因此 始终 是第一个（也是唯一的）子元素。你不能那样识别它。

您需要定位.w3-content > div而不是获取容器的所有直接后代。

其他错误在伪选择器中。获得正确的目标后，您需要使用格式:not(selector)，之前没有任何差距。所以在这种情况下，它将是:not(:first-child)。

换句话说，您在.mySlides之后添加了一个额外的空格，在not之前删除了冒号，并错过了:first-child周围的括号。

所以，正确的CSS将是：

.w3-content > div:not(:first-child) { display: none; }

另一种方法是隐藏所有幻灯片，然后显示第一个：

.w3-content > div { display: none; }
.w3-content > div:first-child { display: block; }

您还需要更新JS以在此之后定位正确的元素（例如通过添加parentElement：

x[i].parentElement.style.display = "none";

和

x[slideIndex - 1].parentElement.style.display = "inline";

答案 2 :(得分：0)

如评论所述，

  

不应该：不是吗？此外，.mySlides和之间不应该有空格。空间意味着孩子们。

     

它不起作用的原因是因为你所有的img都是第一个孩子

您可以改用div.w3-content div:not(:first-child) img.mySlides选择器。

观

  • 获取.w3-content中除第一个孩子以外的所有div。我是直接使用div但您应该添加一个类并将其用作div.className
  • 隐藏mySlides。

<强>示例： 

div.w3-content div:not(:first-child) img.mySlides {
  display: none;
}
<div class="btt"><button class="w3-button" onclick="plusDivs(-1)">❮ Prev</button> <button class="w3-button" onclick="plusDivs(1)">Next ❯</button></div>
<div class="w3-content">

  <div><img class="mySlides" src="/wp-content/images/1.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/2.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/3.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/4.jpg" alt=Kaley Cuoco nackt ""></div>
  <div><img class="mySlides" src="/wp-content/images/5.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/6.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/7.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/8.jpg" alt=Kaley Cuoco nackt ""></div>
  <div><img class="mySlides" src="/wp-content/images/9.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/10.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/11.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/12.jpg" alt=Kaley Cuoco nackt ""></div>
  <div><img class="mySlides" src="/wp-content/images/13.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/14.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/15.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/16.jpg" alt=Kaley Cuoco nackt ""></div>
  <div><img class="mySlides" src="/wp-content/images/17.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/18.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/19.jpg" alt="Kaley Cuoco nackt"></div>
  <div><img class="mySlides" src="/wp-content/images/20.jpg" alt="Kaley Cuoco nackt "></div>
  <div><img class="mySlides" src="/wp-content/images/21.jpg" alt="Kaley Cuoco nackt "></div>
  <div><img class="mySlides" src="/wp-content/images/22.jpg" alt="Kaley Cuoco nackt "></div>

</div>

答案 3 :(得分：-1)

查看css tricks

应该是

.mySlides:not(:first-child){
    display:none !important;
}
相关问题
最新问题