使用類型的第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個

回答

相關問題