Am o div
tag-ul conține mai multe ul
categorie.
Am'm posibilitatea de a seta proprietăți CSS pentru prima ul
tag-ul numai:
div ul:first-child {
background-color: #900;
}
Cu toate acestea, următoarele încercări de a stabili proprietăți CSS pentru fiecare alte ul
tag cu excepția primului, don't de lucru:
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
Cum pot scrie in CSS: "fiecare element, cu excepția primei"?
Una dintre versiunile ai postat [de fapt de lucrări][1] pentru toate browserele moderne (în cazul în care selectoare CSS de nivel 3 acceptat):
div ul:not(:first-child) {
background-color: #900;
}
Dacă aveți nevoie de suport vechi de browsere, sau dacă sunt împiedicate de :nu
selector's limitare (se acceptă doar o simplă selector ca un argument), atunci puteți folosi o altă tehnică:
A defini o regulă care are domeniul de aplicare mai mare decât ceea ce ai de gând și apoi "revoca" condiționat, limitarea domeniului său de aplicare la ceea ce aveți de gând:
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
Atunci când limitarea domeniului de aplicare a folosi default value pentru fiecare atribut CSS pe care le setați.
Acest CSS2 soluție ("orice ul
după altul ul
") funcționează, de asemenea, și este susținută de mai multe browsere.
div ul + ul {
background-color: #900;
}
Spre deosebire de :nu
și :nth-frate
, a adiacente frate selector este susținută de IE7+.
Dacă aveți JavaScript schimbări aceste proprietăți după pagină se încarcă, ar trebui să se uite la unele bug-uri cunoscute în IE7 și IE8 implementari de acest lucru. A se vedea acest link.
Pentru orice static web page, acest lucru ar trebui să funcționeze perfect.
Din :nu
nu este acceptat de IE6-8, mi-ar sugera acest lucru:
div ul:nth-child(n+2) {
background-color: #900;
}
Așa că alege fiecare ul
în elementul părinte cu excepția primului.
Consultați Chris Coyer's "Utile :nth-child Retete" articolul pentru mai mult nth-child
exemple.
Puteți folosi orice selector cu "nu"
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)){}
Am't au noroc cu unele dintre cele de mai sus,
Acest lucru a fost singurul care a lucrat de fapt pentru mine
ul:nu(:în primul rând-de-tip) {}
Aceasta a lucrat pentru mine atunci când am fost încercarea de a fi primul buton afișat pe pagina nu fi efectuată de către o marja de stânga opțiune.
aceasta a fost opțiunea-am încercat prima, dar nu't de lucru
ul:nu(:primul copil)
Puteți utiliza selectorul cu :nu
ca mai jos puteți utiliza orice selector în interiorul :nu()
any_CSS_selector:not(any_other_CSS_selector){
/*YOUR STYLE*/
}
puteți utiliza
:nu
fără mamă selector la fel de bine.
:not(:nth-child(2)){
/*YOUR STYLE*/
}
Mai multe exemple
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*/
}
Ca am folosit `ul:nu(:primul copil) este o soluție perfectă.
div ul:not(:first-child) {
background-color: #900;
}
De ce este aceasta o perfect, deoarece, prin utilizarea ul:nu(:primul copil)
, putem aplica CSS pe interior elemente. Ca `li, img, span, o categorie etc.
Dar atunci când este utilizat alții solutii:
div ul + ul {
background-color: #900;
}
și
div li~li {
color: red;
}
și
ul:not(:first-of-type) {}
și
div ul:nth-child(n+2) {
background-color: #900;
}
Aceste restrictiona ul la nivel de CSS. Să presupunem că nu putem aplica CSS pe li
ca `div-ul + ul li'.
Pentru interior elemente de nivel prima Soluție funcționează perfect.
div ul:not(:first-child) li{
background-color: #900;
}
și așa mai departe ...