Ik heb een div-tag met verschillende ul-tags.
Ik kan alleen CSS-eigenschappen instellen voor de eerste ul-tag:
div ul:first-child {
background-color: #900;
}
Mijn volgende pogingen om CSS-eigenschappen voor elke ul-tag in te stellen, behalve de eerste, werken echter niet:
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
Hoe kan ik in CSS schrijven: “elk element, behalve het eerste”?
Antwoord 1, autoriteit 100%
Een van de versies die je hebt gepost werkt eigenlijkvoor alle moderne browsers (waar CSS-selectors niveau 3worden ondersteund):
div ul:not(:first-child) {
background-color: #900;
}
Als je oudere browsers moet ondersteunen, of als je wordt gehinderd door de eenvoudige selectorals een argument) dan kun je een andere techniek gebruiken:
Definieer een regel die een grotere reikwijdte heeft dan u van plan bent en “trek deze voorwaardelijk in”, waarbij u de reikwijdte beperkt tot wat u wel van plan bent:
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
Gebruik bij het beperken van het bereik de standaardwaardevoor elk CSS-kenmerk dat u bent instelling.
Antwoord 2, autoriteit 10%
Deze CSS2-oplossing (“elke ulna een andere ul“) werkt ook en wordt door meer browsers ondersteund.
div ul + ul {
background-color: #900;
}
In tegenstelling tot :noten :nth-sibling, is de aangrenzende broer/zus-kiezerwordt ondersteund door IE7+.
Als u JavaScriptdeze eigenschappen laat wijzigen nadat de pagina is geladen, moet u eens kijken naar enkele bekende bugs in de IE7en IE8implementaties van dit. Zie deze link.
Voor elke statische webpagina zou dit perfect moeten werken.
Antwoord 3, autoriteit 5%
Aangezien :notniet wordt geaccepteerd door IE6-8, raad ik je dit aan:
div ul:nth-child(n+2) {
background-color: #900;
}
Dus je kiest elke ulin zijn bovenliggende element behalve de eerste.
Raadpleeg Chris Coyer’s “Handige :nth-child recepten”artikel voor meer nth-childvoorbeelden .
Antwoord 4
not(:first-child)lijkt niet meer te werken. Tenminste met de recentere versies van Chrome en Firefox.
Probeer in plaats daarvan dit:
ul:not(:first-of-type) {}
Antwoord 5
div li~li {
color: red;
}
Ondersteunt IE7
Antwoord 6
U kunt elke selector gebruiken met not
p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}
Antwoord 7
U kunt uw selector gebruiken met :notzoals hieronder, u kunt elke selector gebruiken binnen de :not()
any_CSS_selector:not(any_other_CSS_selector){
/*YOUR STYLE*/
}
je kunt
:notook gebruiken zonder ouderselector.
:not(:nth-child(2)){
/*YOUR STYLE*/
}
Meer voorbeelden
any_CSS_selector:not(:first-child){
/*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
/*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
/*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
/*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
/*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
/*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
/*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
/*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
/*YOUR STYLE*/
}
Antwoord 8
Ik had geen geluk met een deel van het bovenstaande,
Dit was de enige die daadwerkelijk voor mij heeft gewerkt
ul:not(:first-of-type) {}
Dit werkte voor mij toen ik probeerde de eerste knop op de pagina te laten zien die niet wordt geëffectueerd door een optie Margin-links.
Dit was de optie die ik het eerst heb geprobeerd, maar het werkte niet
ul:not(:first-child)
Antwoord 9
U kunt “First-Child” pseudo-class in de “NOT ()” pseudo-klasse gebruiken.
div ul:not(:first-child){
background-color: #900;
}<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo Classes</title>
</head>
<body>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
</ul>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
</ul>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</div>
</body>
</html>Antwoord 10
Zoals ik gebruikte ul:not(:first-child)is een perfecte oplossing.
div ul:not(:first-child) {
background-color: #900;
}
Waarom is dit een perfecte, omdat het gebruik van ul:not(:first-child), we kunnen CSS op innerlijke elementen toepassen. Zoals li, img, span, atags enz.
Maar wanneer gebruikte andere oplossingen:
div ul + ul {
background-color: #900;
}
en
div li~li {
color: red;
}
en
ul:not(:first-of-type) {}
en
div ul:nth-child(n+2) {
background-color: #900;
}
Deze beperken alleen UL-niveau CSS. Stel dat we CSS niet kunnen toepassen op lials `div ul + ul li ‘.
Voor elementen op het binnenniveau werkt de eerste oplossing perfect.
div ul:not(:first-child) li{
background-color: #900;
}
enzovoort …
Antwoord 11
li + li {
background-color: red;
}