使用第 n 个类型答案

【问题标题】：Using nth of type使用第 n 个类型
【发布时间】：2016-10-23 06:04:21
【问题描述】：

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

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

我考虑过尝试解决这个问题的一种方法是第 n 个孩子。我知道每张幻灯片上会有 2 张图片，所以我可以将 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）

现在问题来了。我似乎无法得到第 n 个类型或我尝试过的东西，第 n 个孩子，做任何事情。没关系做我想做的事并将后续页面的模式放在不同的地方，我什至无法让第一页上的第二个模式改变 - 正如你从上面的版本中看到的那样，我只是想得到一些回应.

我做错了什么？

【问题讨论】：

<p><img src="ONE.png"</p> 怎么样？少了点什么。
根据文档，nth-of-type（和nth-child）应该有一个包含n的值。如果你这样做nth-of-type(1n)，你的问题就会消失。
nth-of-type 仅适用于标签...并且还可以在同一个父级上运行，您无法按照自己的意愿遍历所有文档搜索。
这不会让他们每次都比顶部高 203% 吗？
真正的问题是其他样式...对于模态的位置是什么？绝对？关系到？预期的输出是多少？

标签： html css css-selectors

【解决方案1】：

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

[attr$=value]

表示属性名为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>

【讨论】：

太棒了！似乎需要的只是 [id$="Modal1"] { top: 103%;颜色：绿色； z指数：5； } 但除此之外它已经解决了我的问题。它正在寻找包含字符串 modalx 的 id 并对其进行修改吗？干杯！
我想知道，为了节省（虚拟）纸张，有没有办法做到 id= modal1 或 modal2？
属性一样吗？
是的，每页会有 2 个，所以每组都完全相同。 1和2一样，3和4一样，等等……
那么你可以像这样使用逗号,：[id$="Modal1"], [id$="Modal2"] {background : red}[id$="Modal3"], [id$="Modal4"] {background : yellow}

【解决方案2】：

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

【讨论】：

【解决方案3】：

我想建议以不同的方式执行此操作，而不是像在以下代码中那样创建新样式来选择每个第 n 个类型：

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

模态对话框应设置距顶部多远的边距，如下所示：

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

【讨论】：