Vraag Richten op het eerste zichtbare element met pure CSS


Ik vraag me af of het mogelijk is om het volgende in zuivere CSS om te zetten.

$('.child:visible:first').css({'border-top':'1px solid #cccccc','border-bottom':'1px solid #cccccc'});

Ik kan geen oplossing vinden.


28
2017-09-12 13:34


oorsprong


antwoorden:


In pure CSS is het niet mogelijk. Chris Coyier heeft :eerste vermeld als puur een jQuery-constructie: http://css-tricks.com/pseudo-class-selectors/.


8
2017-09-12 13:49



Als een abstract is het niet mogelijk: jQuery maakt gebruik van het doorkruisen van de DOM om een ​​element programmatisch te bepalen dat in verschillende omstandigheden past en vervolgens stopt. Je kunt dit niet doen. Maar ik neem aan dat je in de praktijk verschillende dingen zult weten. Deze oplossing gaat uit van:

  1. Je weet wel hoe deze .child elementen zullen worden verborgen. Zullen ze hebben display: none als een inline-stijl (als u jQuery hebt gebruikt .hide() op hen, zullen ze)? Hebben ze een klasse van .hidden? Zolang u de methode kent, zal er een selector zijn die u kunt gebruiken om dit weer te geven. U kunt dit gebruiken in combinatie met de CSS3 :not() selector.
  2. Omdat deze worden genoemd .child, Ik neem aan dat ze allemaal broers en zussen zijn - niemand is genest in de andere .child elementen, en ze delen allemaal dezelfde ouder.

Als een van de bovenstaande dingen niet waar is, is het onmogelijk. Maar als ze allebei waar zijn:

.child:not( [style*='display: none'] ) {
    border-top:    1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

.child:not( [style*='display: none'] ) ~ .child:not( [style*='display: none'] ) {
    /* ...or whatever the default styles are */
    border-top:    none;
    border-bottom: none;
}

De :not() pseudo-klasse is vrij duidelijk: het selecteert alleen elementen die niet doen overeenkomen met de ingesloten selector. De ~ operator betekent dat de selector aan de rechterkant het doelwit is als het is een broer of zus van de selector aan de linkerkant die daarna in de broncode verschijnt.


29
2017-09-12 14:06



Het is mogelijk als je weet hoe het is verborgen. Dit zou bijvoorbeeld werken:

li:first-child[style*="display:none"] + li:not([style*="display:none"]) {
  /* ... */
  background-color: blue;
}
<ul>
  <li style="display:none">hello</li>
  <li>World!</li>
</ul>


10
2017-12-16 23:52



probeer dit Voorbeeld

ul li{
    background: lightslategrey
}
li:first-child{
  background: blue;
}
ul li[style*="display:none"] + li:not([style*="display:none"]){
  background: blue;
}
ul li:not([style*="display:none"]) + li{
  background: blue;
}
ul > li:not([style*="display:none"]) ~ *{
  background: lightslategrey!important;
}

5
2017-11-24 09:10