使用类型的第n个

我创建的网站部分由包含完整页面幻灯片的长页面组成。在这些幻灯片中的每一张上都会有2个图像，可以通过点击打开模式来查看它们。使用类型的第n个

我与我的模式有问题是，我把它放在离顶部一定距离，这适用于第一张幻灯片的模态罚款的每个实例，但对于每个后续幻灯片，这种情况并不如此。

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

但是....我似乎没有能够获得第n个孩子的工作。我的CSS基本上说：

.modalDialog { 
 
    position: fixed; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
\t color:blue; 
 
    left: 22%; 
 
\t width:80%; 
 
\t height:90%; 
 
\t 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; 
 
\t } 
 

 
.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也不断向上计数（所以滑件3具有openModal5和6）

现在的问题是。我似乎无法获得第n种类型的东西，或者我已经尝试过的任何东西，第n个孩子，去做任何事情。不要介意做我想做的事情，并为随后的页面在不同的地方的模式，我甚至不能获得第一页上的第二模式改变 - 正如你从上面的版本看到，我试图只是得到一些响应。

我在做什么错？

来源

2016-06-21 Craig Jones

怎么样'

'？有一些缺失。 – Xufox

根据文档，'nnth-type-type'（和'nnth-child'）应该有一个包含'n'的值。如果你使用'n-type（1n）'，你的问题就会消失。 – somethinghere

“nth-type-type”仅适用于标签......并且也在同一父级上传播，因此无法像所需搜索所有搜索文档。 – DaniP

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

[ATTR $ =值]

表示与属性姓名o的元素f 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>

来源

2016-06-21 15:56:11 dippas

优秀！似乎有必要的全部是 [id $ =“Modal1”] { top：103％; 颜色：绿色; z-index：5; }但它解决了我的问题。它寻找包含字符串modalx并修改它的ID？干杯! –

我想知道，为了保存（vritual）纸的目的是有办法做id = modal1或modal2？ –

属性是否一样？ – dippas

nth-of-type(n)计数标签型（在同一水平上），而不是类：在你的情况下，将选择的第n个div标签，不带班的第n个标签.modalDialog

来源

2016-06-21 15:49:38 Johannes

我想建议这个做不同的方式，而不是创建新的风格来选择每一个第n-的型像你在下面的代码做：

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

模态对话应该设定应该如何远离顶部，这样的利润率：

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

来源

2016-06-21 17:50:42

使用类型的第n个

回答

相关问题