html - 使用第n个类型

我正在创建一个网站的一部分，其中包括一个包含整页幻灯片的长页。在每张幻灯片上都有两个图像，可以单击打开一个模式来查看它们。
我的模型有一个问题，就是我把它放在离顶部一定距离的地方，这适用于模型的每个实例，第一张幻灯片很好，但后面每张幻灯片就不那么好了。
我考虑过的解决这个问题的方法之一是第n个孩子。
我知道每张幻灯片上会有两张图片，所以我可以将100%添加到3和4，200%添加到5和6，等等…
但是…我好像不能让第N个孩子工作。
我的css基本上说：

.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%;
}

<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>  

随着幻灯片编号的递增，openmodal也在不断递增（因此slide3有openmodal5和6）
现在问题是。我就是不能让我试过的孩子做任何事。
别介意做我想做的事情，把后面几页的情态动词放在不同的地方，我甚至不能让第一页的第二个情态动词改变——正如你在上面的版本中看到的，我只是想得到一些回应。
我做错什么了？

最佳答案

您可以使用attribute selector[id$="Modal1"]
[属性$=值]
表示属性名为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>

关于html - 使用第n个类型，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37948677/