გამოყენება: nth-of-type (n) ერთად მაგიდები
მაგიდების უფრო ადვილად წასაკითხად, ხშირად სტილი სტრიქონების გასაკეთებლად, ფონური ფერის ალტერნატივით. სტილის ცხრილების ერთ-ერთი ყველაზე გავრცელებული გზაა ყველა სხვა რიგის ფონის ფერი. ეს ხშირად მოიხსენიება როგორც "zebra stripes."
შეგიძლიათ განახორციელოთ ეს არის ყველა სხვა სტრიქონი CSS კლასთან ერთად და ამ კლასის სტილის განსაზღვრა. ეს მუშაობს, მაგრამ არ არის საუკეთესო ან ყველაზე ეფექტური საშუალება მის შესახებ.
ამ მეთოდის გამოყენებისას, ყოველ ჯერზე, საჭიროა ამ მაგიდის რედაქტირება, რომელიც უნდა შეიცვალოს თითოეული რიგის მაგიდაზე მაგიდასთან, რათა თითოეული რიგი შეესაბამებოდეს ცვლილებებს. მაგალითად, თუ თქვენს მაგიდასთან ახალი სვეტის ჩასმა, ქვემოთ მოყვანილი ყველა სხვა სტრიქონი უნდა შეიცვალოს.
CSS ხდის მარტივი სტილი მაგიდები zebra ზოლებით. თქვენ არ გჭირდებათ დამატებითი HTML ატრიბუტების ან CSS კლასების დამატება, უბრალოდ გამოიყენოთ: nth-of-type (n) CSS selector .
: Nth-of-type (n) selector არის სტრუქტურული ფსევდო კლასის CSS, რომელიც საშუალებას გაძლევთ სტილის ელემენტები საფუძველზე მათი ურთიერთობების მშობელი და ძმა ელემენტები. თქვენ შეგიძლიათ გამოიყენოთ ის, რომ შეარჩიოთ ერთი ან მეტი ელემენტი მათი წყაროს მიხედვით. სხვა სიტყვებით რომ ვთქვათ, ეს შეიძლება შეესაბამებოდეს ყველა იმ ელემენტს, რომელიც არის მშობლის კონკრეტული ტიპის მე -4 ბავშვი.
წერილი n შეიძლება იყოს სიტყვით (როგორიცაა უცნაური ან თუნდაც), რიცხვი ან ფორმულა.
მაგალითად, სტილის ყველა სხვა პარაგრაფის ტეგით ყვითელი ფონის ფერი, თქვენი CSS დოკუმენტი მოიცავს:
p: nth-of-type (უცნაური) {
ფონზე: ყვითელი;
}
დაწყება თქვენი HTML მაგიდა
პირველი, შექმნათ თქვენი მაგიდა, როგორც თქვენ ჩვეულებრივ წერენ HTML. არ დაამატოთ სპეციალური კლასები სტრიქონების ან სვეტებისთვის.
თქვენს სტილში, დაამატეთ შემდეგი CSS:
tr: nth-of-type (უცნაური) {
ფონის ფერი: #ccc;
}
ეს სტილის ყველა სხვა სტრიქონში ნაცრისფერი ფერის ფერია დაწყებული პირველი რიგისა.
სტილი ალტერნატიული სვეტები იმავე გზით
თქვენ შეგიძლიათ გააკეთოთ იგივე სტილის სვეტები თქვენს ცხრილებში. ამის გაკეთება, უბრალოდ შეცვალეთ tr თქვენი CSS კლასის to td. მაგალითად:
td: nth-of-type (უცნაური) {
ფონის ფერი: #ccc;
}
ფორმულების გამოყენება n-of-type (n) სელექტორის სახით
სორტიზატორისთვის გამოყენებული ფორმულის სინტაქსი + ბ.
არის რიცხვი, რომელიც წარმოადგენს ციკლს ან ინდექსს.
n ფაქტიურად არის ასო "n" და წარმოადგენს counter, რომელიც ვარსკვლავს 0-ზე.
+ არის ოპერატორი, რომელიც ასევე შეიძლება იყოს "-"
b არის მთელი რიცხვი და წარმოადგენს ოფსეტური ღირებულების მაგალითს, თუ რამდენი მწკრივი ქვემოთ ჩამოთვლილია, რომ შერჩევა იწყება ფონის ფერის გამოყენებაზე. ეს აუცილებელია, თუ ოპერატორი შედის ფორმულაში.
მაგალითად, თუ გსურთ ყოველი ფურცლის ფერი ყოველი 3-ე რიგისთვის, თქვენი ფორმულა იქნება 3n + 0. თქვენი CSS შეიძლება ასე გამოიყურებოდეს:
tr: nth-of-type (3n + 0) {
ფონზე: slategray;
}
სასარგებლო ინსტრუმენტების გამოყენება n-of-type Selector
თუ ფსევდო კლასს nth-of-type selector- ის გამოყენებით ფორმულის ასპექტში შეგრძნებით შეგრძნებით, სცადეთ: nth Tester საიტი, როგორც სასარგებლო ინსტრუმენტია, რომელიც დაგეხმარებათ განსაზღვროთ სინტაქსი, რათა მიაღწიოთ სახეს. გამოიყენეთ Dropdown მენიუ, რათა აირჩიოთ nth-of-type (ასევე შეგიძლიათ ექსპერიმენტი სხვა ფსევდო კლასების აქაც, ასევე, როგორიცაა nth-child).