Question

我创建的网站部分包含一个包含整页幻灯片的长页面。在每张幻灯片上都会有2张图片，可以点击这些图片打开一个模态来查看它们。

我对我的模态所遇到的问题是我将它放在距离顶部一定距离处，这适用于第一张幻灯片的模态的每个实例，但对于每个后续幻灯片都不太适用。< / p>

我考虑尝试解决这个问题的一种方法是第n个孩子。我知道每张幻灯片上会有2张图片，所以我可以100％添加到3和4,200％到5和6等等....

但......我似乎无法让第n个孩子工作。我的css基本上说：

＆＃13;

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
	color:blue;
    left: 22%;
	width:80%;
	height:90%;
	top:103%;
    z-index: 9;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
	}

.modalDialog:nth-of-type(1){
    color:yellow;
    top: 203%;
}

＆＃13;

<div id="slide1" class="slide">
  <div class="title"> 
        blah blah
  </div>
    <div class="tooltip">     
        <a href="#openModal">
            <img src="ONE.png">  
            <p class="tooltiptext">yup</p>
        </a>
    </div>
    <div class="tooltip">
        <a href="#openModal2">
            <img src="two.png">  
             <p class="tooltiptext">aye..</p>
        </a>
    </div> 
        <div id="openModal" class="modalDialog">
            <div>
                <a href="#close" title="Close" class="close">X</a>
                <h2>descriptions</h2>
                <img src="ONE.png">
            </div>
        </div> 
        <div id="openModal2" class="modalDialog">
            <div>   
                <a href="#close" title="Close" class="close">X</a>
                    <h2>desc</h2>
                    <img src="two.png">
            </div>
        </div>      
  </div>

＆＃13;

幻灯片编号向上计数，openModal也在不断计数（所以slide3有openModal5和6）

现在的问题是。我似乎无法得到任何类型的东西，或者我曾经尝试过的孩子，做任何事情。没关系做我想做的事情并将后续页面的模态放在不同的地方，我甚至无法在第一页上更改第二个模式 - 正如您从上面的版本中看到的那样我试图得到一些回应。

我做错了什么？

Answer 1

您可以使用attribute selector [id$="Modal1"]

<强> [ATTR $ =值]

表示属性名称为attr且其最后一个值以“value”为后缀的元素。

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  color: blue;
  left: 22%;
  width: 80%;
  height: 90%;
  top: 103%;
  z-index: 9;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
/*Starts with string */
[id^="openModal"] {
  position: relative;
  top: 200%;
  z-index: 10;
  opacity:1
}
/*Ends with string */
[id$="Modal1"] {
 background : red
}
[id$="Modal2"] {
 background : yellow
}

<div id="slide1" class="slide">
  <div class="title">
    blah blah
  </div>
  <div class="tooltip">
    <a href="#openModal">
      <img src="ONE.png">
      <p class="tooltiptext">yup</p>
    </a>
  </div>
  <div class="tooltip">
    <a href="#openModal2">
      <img src="two.png">
      <p class="tooltiptext">aye..</p>
    </a>
  </div>
  <div id="openModal1" class="modalDialog">
    <div>
      <a href="#close" title="Close" class="close">X</a>
      <h2>descriptions</h2>
      <img src="ONE.png">
    </div>
  </div>
  <div id="openModal2" class="modalDialog">
    <div>
      <a href="#close" title="Close" class="close">X</a>
      <h2>desc</h2>
      <img src="two.png">
    </div>
  </div>
</div>

Answer 2

nth-of-type(n)计算标记类型（在同一级别上），而不是类：在您的情况下，它将选择第n个div标记，而不是第n个标记班.modalDialog

Answer 3

我想以不同的方式建议这样做，而不是像以下代码那样创建一个新的样式来选择每个nth-type：

.modalDialog:nth-of-type(1){
    color:yellow;
    top: 203%;
}

模态对话应该设置一个距离顶部应该有多远的边距，如下所示：

.modalDialog{
    color:yellow;
    margin: 15% auto;
}

使用类型的第n个

3 个答案: