Რა არის CSS შთამომავალი ამორჩევა?

HTML დოკუმენტის სტრუქტურა ჰგავს ოჯახის ხეებს. თქვენს ოჯახში, შენ გაქვს მშობლები და სხვები. ეს არის თქვენი წინაპრები. ბავშვები და ის, ვინც შენს შემდეგ მოდის, შენი შთამომავლები არიან. HTML მუშაობს მსგავსი ფორმით. ელემენტები, რომლებიც შიგნით სხვა ელემენტები არიან მათი შთამომავლები. მაგალითად, მას შემდეგ, რაც თითქმის ყველა HTML ელემენტი არის ტეგების შიგნით, ისინი იქნება ელემენტების შთამომავალი. ეს ურთიერთობა მნიშვნელოვანია იმისთვის, რომ გაიგოთ CSS- ში მუშაობის დაწყებისას და ვიზუალური სტილის გამოყენების კონკრეტული ელემენტების მისაღწევად.

CSS შთამომავალი სელექტორები

CSS შთამომავალი სელექტორი ვრცელდება ელემენტებზე, რომლებიც შიგნით სხვა ელემენტზე (ან უფრო ზუსტად არის მითითებული, ელემენტი, რომელიც სხვა ელემენტის შთამომავალია). მაგალითად, უწესრიგო სია აქვს tag ერთად tags როგორც შთამომავლები. მოდით გამოიყენოთ შემდეგი HTML როგორც მაგალითი:

• ეს არის ბმული

  LI ტეგები არიან UL- ის შთამომავლები. A tag არის შთამომავალი ორივე LI (ბავშვის შთამომავალი) და UL (შვილიშვილი შთამომავალი) tags. თუ ფიქრობთ ამის შესახებ ოჯახის ხე მაგალითის გამოყენებით,

  იქნება მშობელი,
  • იქნება ეს ელემენტის ბავშვი და >
  • .

    ასე რომ, კონკრეტულად როგორ მივაღწიოთ ვებ-გვერდს ამ შთამბეჭდავი სელექტორის გამოყენებით? პირველ რიგში, თქვენ უნდა განვსაზღვროთ შთამომავალი სელექტორები სივრცის მიერ გამოყოფილი ორ (ან მეტი) ტიპის სელექტორის გამოყენებით.

    li a {ტექსტური გაფორმება: არა; }

    ამ მაგალითში, სტილები მხოლოდ ბმულის ელემენტს (), რომელიც სიის ელემენტის ელემენტის (

    • ) შთამომავალია. ყველა სხვა ბმულები გვერდზე, რომლებიც არ არიან შთამომავალი სიის პუნქტის არ მიიღებს ამ სტილის.

      ერთი მნიშვნელოვანი რამ უნდა გვახსოვდეს, რომ არ აქვს მნიშვნელობა რამდენი tags ისინი შორის tags თქვენ შეიძლება გამოყენებით თქვენი შთამომავალი სელექციონერი. თუ მეორე ელემენტს თან ერთვის პირველი ელემენტის ფარგლებში, ის შეარჩევს შთამომავალს.

      თუ გსურთ აირჩიოთ ყველა წამყვანები, რომლებიც წარმოშობით ul ელემენტები, თქვენ წერენ:

      ul a {ტექსტური გაფორმება: არა; }

      ახლა, ამ სტილის ვრცელდება ნებისმიერი ბმული, რომელიც შთამომავალი სიაში ნივთი. თქვენ ასევე შეგიძლიათ დაწეროთ ეს სელექტორი

      ul li {ტექსტური გაფორმება: არა; }

      ეს არის შთამომავალი სელექტორი, რომელიც იყენებს ორზე მეტი ტიპის სელექტორს. ამ შემთხვევაში, ეს ეხება იმ ბმულებს, რომლებიც სიაშია, ისევე როგორც უწესრიგო სიის შიგნით.

      კლასის მოსარჩელეებისა და პირადობის მოწმობების გამოყენება

      სელექციონერები, რომლებიც თქვენ დაღმავალია, ყოველთვის არ უნდა იყოს შთამომავლები. მაგალითად, წარმოიდგინეთ, რომ თქვენ გაქვთ ფართობი საიტზე (როგორც განყოფილება) ერთად ID ბილბორდი "ბილბორდი". ამ ID- ის შთამომავლის შერჩევა შეგიძლიათ:

      #billboard ul {background-color: #ccc; }

      ეს სტილი უწესრიგო სიაა, რომელიც "ბილბორდის" პირადობის მქონე ელემენტის შთამომავალია. თქვენ შეგიძლიათ გააკეთოთ იგივე კლასის ღირებულებები.

      div.billboard ul {background-color: #ccc; }

      ეს ითვალისწინებს, რომ განყოფილებას აქვს "ბილბორდის" კლასის ღირებულება. CSS ზემოთ რომ სტილი

      ელემენტს შიგნით ნებისმიერი სამმართველოს, რომელსაც აქვს ამ კლასის ღირებულება.

      თქვენ შეგიძლიათ მიიღოთ მართლაც მძიმე და სიტყვიერი შემადგენელი შთამომავლების შერჩევა. მაგალითად, თუ თქვენ იყენებთ Dreamweaver- ს დაწერა HTML კოდი , არსებობს პარამეტრი, როდესაც დაამატებთ ახალ CSS წესებს, რომელიც ავტომატურად შექმნის სარჩელს ამ კურსორის განთავსებაზე. რა Dreamweaver აკეთებს ამ შემთხვევებში ქმნის wildly verbose და ხანგრძლივი შთამომავალი სელექციონერი. ეს სპეციფიკი არ არის აუცილებელი თქვენი CSS- ის მუშაობისთვის. რა გსურთ გააკეთოთ ბალანსი შთამბეჭდავი სელექტორის შორის, რომელიც კონკრეტული საკმარისია, რომ თქვენ შეგიძლიათ გაიგოთ ზუსტი ელემენტების გასაკეთებლად (სტილის გარეშე, რომელსაც არ იმოქმედებს) არჩეული CSS წესების გარეშე, რომლებიც ზედმეტად არიან დიდი.