使用类型的第n个

Question

I'm creating a website part of which consists of a long page containing full page slides. On each of these slides there will be 2 images which can be clicked to open a modal to view them.

The problem I'm having with my modal is that I place it at a certain distance from the top and this applies to every instance of the modal- fine for the first slide but less so for each subsequent slide.

One way I have considered to try and tackle this is nth child. I know that there will be 2 images on each slide so I can add 100% to 3 and 4, 200% to 5 and 6, etc....

But....I don't seem to be able to get nth child working. My css basically says:

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

With the slide number counting up and the openModal also continuously counting up (so slide3 has openModal5 and 6)

Now the problem is. I just can't seem to get nth of type or something I've tried, nth of child, to do anything. Never mind doing what I want and putting the modals for the subsequent pages in different places, I can't even get the second modal on the first page to change- as you see from the version above I'm trying to just get some response.

What am I doing wrong with this?

Answer 1

You can use 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> 

Answer 2

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

Answer 3

I'd like to suggest doing this a different way, instead of creating a new style to select each nth-of-type like you do in the following code:

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

The modal dialogue should set a margin for how far it should be from the top, like this:

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