Saya memiliki div
tag yang mengandung beberapa ul
kategori.
I'm dapat mengatur properti CSS untuk pertama ul
tag hanya:
div ul:first-child {
background-color: #900;
}
Namun, berikut saya mencoba untuk mengatur properti CSS untuk satu sama lain ul
tag kecuali yang pertama don't bekerja:
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
Bagaimana saya bisa menulis di CSS: "setiap elemen, kecuali yang pertama"?
Salah satu versi yang diposting [benar-benar bekerja][1] untuk semua browser modern (di mana CSS level 3 adalah yang didukung):
div ul:not(:first-child) {
background-color: #900;
}
Jika anda perlu dukungan browser lawas, atau jika anda terhalang oleh :tidak
selector's pembatasan (hanya menerima sederhana pemilih sebagai argumen) maka anda dapat menggunakan teknik lain:
Mendefinisikan sebuah aturan yang memiliki ruang lingkup yang lebih besar dari apa yang anda berniat dan kemudian "mencabut" itu kondisional, yang membatasi ruang lingkup untuk apa yang anda lakukan yang bermaksud:
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
Ketika membatasi lingkup gunakan default value untuk masing-masing atribut CSS yang anda setting.
Ini CSS2 solusi ("setiap ul
lain ul
") bekerja, juga, dan didukung oleh banyak browser.
div ul + ul {
background-color: #900;
}
Tidak seperti :tidak
dan :nth-saudara
, yang adjacent sibling selector didukung oleh IE7+.
Jika anda memiliki JavaScript perubahan sifat ini setelah beban halaman, anda harus melihat pada beberapa bug yang dikenal di IE7 dan IE8 implementasi ini. Lihat link ini.
Untuk setiap halaman web statis, ini harus bekerja dengan sempurna.
Sejak :bukan
tidak diterima oleh IE6-8, saya akan menyarankan anda ini:
div ul:nth-child(n+2) {
background-color: #900;
}
Jadi, anda memilih setiap ul
dalam elemen induk kecuali yang pertama.
Lihat Chris Coyer's "Berguna :nth-child Resep" artikel untuk lebih nth-child
contoh.
Anda dapat menggunakan selector dengan tidak
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)){}
Aku't memiliki keberuntungan dengan beberapa hal di atas,
Ini adalah satu-satunya yang benar-benar bekerja untuk saya
ul:tidak(:pertama-of-type) {}
Ini bekerja untuk saya ketika saya mencoba untuk memiliki tombol pertama ditampilkan pada halaman tidak akan dipengaruhi oleh margin-left pilihan.
ini adalah pilihan saya mencoba pertama tapi itu tidak't bekerja
ul:tidak(:first-child)
Anda dapat menggunakan selector dengan :tidak
seperti di bawah ini anda dapat menggunakan selector dalam :tidak()
any_CSS_selector:not(any_other_CSS_selector){
/*YOUR STYLE*/
}
anda dapat menggunakan
:tidak
tanpa induk pemilih juga.
:not(:nth-child(2)){
/*YOUR STYLE*/
}
Contoh
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*/
}
Seperti yang saya digunakan ul:tidak(:first-child)
adalah solusi yang sempurna.
div ul:not(:first-child) {
background-color: #900;
}
Mengapa ini yang sempurna karena dengan menggunakan ul:tidak(:first-child)
, kita dapat menerapkan CSS pada unsur-unsur batin. Seperti li, img, span, a
tag dll.
Tapi ketika digunakan orang lain solusi:
div ul + ul {
background-color: #900;
}
dan
div li~li {
color: red;
}
dan
ul:not(:first-of-type) {}
dan
div ul:nth-child(n+2) {
background-color: #900;
}
Ini membatasi hanya ul tingkat CSS. Misalkan kita tidak dapat menerapkan CSS pada li
sebagai `div ul + ul li'.
Bagi dalam elemen-elemen tingkat pertama Solusi bekerja dengan sempurna.
div ul:not(:first-child) li{
background-color: #900;
}
dan sebagainya ...