html - 使用第 n 个类型

Question

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

我的模态框存在的问题是我将它放置在距顶部一定距离的位置，这适用于模态框的每个实例 - 第一张幻灯片很好，但随后的每张幻灯片都不太好。

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

但是....我似乎无法让第n个 child 工作。我的 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)

现在问题来了。我似乎无法得到 nth of type 或我尝试过的东西，nth of child，做任何事情。不要介意做我想做的事并将后续页面的模式放在不同的地方，我什至无法更改第一页上的第二个模式——正如你从上面的版本中看到的那样，我只是想得到一些回应.

我做错了什么？

Answer 1

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

[attr$=value]

Represents an element with an attribute name of attr and whose last value is suffixed by "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>