ატრიბუტების სელექტორები. CSS ატრიბუტების სელექტორები ელემენტის ზომებისა და კოორდინატების ამოღება და შეცვლა

საწყალი მისამართი!

დაჯგუფება

ნებისმიერი ტიპის შერჩევისთვის შეგიძლიათ აირჩიოთ სელექტორი რამდენიმე ატრიბუტისთვის. მაგალითად:

Img (/ * ეს სტილები დარჩება სტაგნაციაში მხოლოდ იმ სურათზე, რომელსაც აქვს სამივე გადაკეთებული ატრიბუტი * /) a (/ * ეს სტილები დარჩება მხოლოდ გაგზავნამდე, რომლის მისამართებზე არის "საიტის" შეკვეთა და ზოგიერთი დავალება სათაურის ატრიბუტი * /)

Galuz zastosuvannya

განახლებული ატრიბუტების სელექტორები (მათ შორის CSS3) მხარდაჭერილია ყველა პოპულარული ბრაუზერის მიერ. ერთადერთი დამნაშავე არის IE6.

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

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

ელემენტების ძალებითა და ატრიბუტებით მანიპულირება

1. კლასში დამატება და მოდიფიკაცია

1.1. Method.addClass()

ამატებს კლასს (ან კლასების რაოდენობას) ნაკრებში გახვეულ კანის ელემენტს. ამ მეთოდის გამოსაყენებლად ჯერ უნდა შექმნათ სტილი მოცემული კლასისთვის. მეთოდი არ შლის ძველ კლასს, უბრალოდ ამატებს ახალს. AddClass (კლასის სახელი)კლასელი ვარ - ერთი ან მეტი სახელი კლასისთვის, გაძლიერებული ერთი ტიპის სივრცით. .addClass (ფუნქცია)ფუნქცია

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

1.2. Method.removeClass()

შლის მითითებულ კლასის სახელ(ებ)ს შეფუთული ნაკრების ყველა ელემენტიდან. AddClass (კლასის სახელი) RemoveClass (კლასის სახელი) - ერთი ან მეტი სახელი კლასისთვის, გაძლიერებული ერთი ტიპის სივრცით. .addClass (ფუნქცია)- აბრუნებს ერთი ან რამდენიმე კლასის სახელს, გამოყოფილი საშვით, რომელიც წაიშლება სხვებისგან. არგუმენტი იღებს ელემენტის ინდექსს ნაკრებში და კლას(ებ)ის ძველ სახელს.

1.3. Method.toggleClass()

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

ToggleClass (დასახელების კლასი) AddClass (კლასის სახელი)- ერთი ან მეტი კლასის სახელები, გამოყოფილი სივრცეებით, რომლებიც შერეული იქნება ნაკრების კანის ელემენტისთვის. .toggleClass (სახელის კლასი, ლოგიკური მნიშვნელობა) AddClass (კლასის სახელი)- ერთი ან მეტი კლასის სახელები, გამოყოფილი სივრცეებით, რომლებიც შერეული იქნება ნაკრების კანის ელემენტისთვის. უფრო ლოგიკური მნიშვნელობა- ადგენს, ამატებს ან მოქმედების ჩვენებათა კლასს. მნიშვნელობა true ამატებს კლასს, false - შლის მას. .toggleClass (ლოგიკური მნიშვნელობა) უფრო ლოგიკური მნიშვნელობა- არაკუნთოვანი პარამეტრი, რომელიც დამონტაჟდება ისე, რომ კომპლექტის კანის ელემენტის კლასი შერეული იყოს. .toggleClass (ფუნქცია, ლოგიკური მნიშვნელობა) - ერთი ან მეტი სახელი კლასისთვის, გაძლიერებული ერთი ტიპის სივრცით. .addClass (ფუნქცია)- სახელს აქცევს კლასში, ასე რომ თქვენ გადახვალთ ნაკრების კანის ელემენტზე. არგუმენტები მოიცავს ელემენტის ინდექსს ნაკრებში და კლასის ძველ მნიშვნელობას. უფრო ლოგიკური მნიშვნელობა- არაკუნთოვანი პარამეტრი, რომელიც დამონტაჟდება ისე, რომ კომპლექტის კანის ელემენტის კლასი შერეული იყოს.

1.4. Method.hasClass()

ამოწმებს კლასს მინიჭებული სახელის არსებობას კონკრეტულ კომპლექტში ერთი ელემენტისთვის. ირთვება true, თუ გსურთ, რომ კომპლექტის ერთ-ერთი ელემენტი შემოწმდეს სახელის კლასის მიხედვით, წინააღმდეგ შემთხვევაში გამოდის false.

HasClass (კლასის სახელი) AddClass (კლასის სახელი)- რიგი ხუმრობის გამო კლასში.

2. ელემენტის ატრიბუტების შეცვლა

მეთოდი აშორებს კომპლექტში პირველი ელემენტის ატრიბუტების მნიშვნელობებს ან ადგენს ერთ ან რამდენიმე ატრიბუტის მნიშვნელობას კომპლექტში შემავალი ელემენტებისთვის.

2.1. Method.attr()

2.2. Method.removeAttr()

თქვენ შეგიძლიათ ნახოთ კომპლექტში გახვეული კანის ელემენტის ატრიბუტების მნიშვნელობები.

RemoveAttr (ატრიბუტის სახელი) ატრიბუტის სახელი- მწკრივი, რომელიც ნიშნავს ხედვის ატრიბუტს.

3. ელემენტარული ძალაუფლების შეცვლა

3.1. Method.css()

ის ითვლის სტილის სიმძლავრის მნიშვნელობებს შეფუთვის კომპლექტში პირველი ელემენტისთვის, ან ადგენს ერთ ან მეტ CSS ძალას ნაკრების კანის ელემენტისთვის.

Css (im of power) მე მაქვს ძალა- მწკრივი ძალაუფლების სახელებით, აქცევს მას და ითვლის მნიშვნელობას კომპლექტის პირველი ელემენტისთვის. .css (ხელისუფლების სახელები) ავტორიტეტების სახელები- ავტორიტეტების მასივი, აბრუნებს მათ გამოთვლილ მნიშვნელობებს ნაკრების პირველი ელემენტისთვის. .css (მნიშვნელობა, მნიშვნელობა) მე მაქვს ძალა მნიშვნელობა- მწკრივი ან ნომერი, რომელიც დამონტაჟდება კომპლექტში შეფუთული ყველა ელემენტისთვის სიმძლავრის მინიჭებული მნიშვნელობის სივრცეში. .css (ძალა, ფუნქცია) მე მაქვს ძალა- რიგი ძალაუფლების სახელებით. - ერთი ან მეტი სახელი კლასისთვის, გაძლიერებული ერთი ტიპის სივრცით. .addClass (ფუნქცია)- ელემენტის ინდექსი კომპლექტში და ძველი სიმძლავრის მნიშვნელობა გადაეცემა ფუნქციას არგუმენტებად. მნიშვნელობა, რომელიც შემოტრიალებულია, დაყენდება ნაკრების ყველა ელემენტისთვის. .css (უფლებამოსილი ობიექტი) ძალაუფლების ობიექტი- ამატებს CSS ავტორიტეტს, რომლის სახელები ფასდება როგორც გასაღებები გადაცემულ ობიექტში, მათთან ასოცირებული არის მნიშვნელობები ერთი და იმავე ნაკრების ყველა ელემენტისთვის.

4. ელემენტის ზომებისა და კოორდინატების მორთვა და შეცვლა

4.1. Method.width()

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

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

4.2. მეთოდი. სიმაღლე ()

ატრიალებს კომპლექტში პირველი ელემენტის სიმაღლის ზუსტ მნიშვნელობას ან ადგენს ნაკრებში კანის ელემენტის სიმაღლეს.

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

4.3. Method.innerWidth()

აბრუნებს შეფუთულ კომპლექტში პირველი ელემენტის სიგანეს საფენის გასწორებით ან აყენებს მას შეფუთული ნაკრების კანის ელემენტისთვის.

InnerWidth() მეთოდი გამოძახებულია პარამეტრების გარეშე. აბრუნებს ზუსტ შიდა სიგანის მნიშვნელობას ნაკრების პირველი ელემენტისთვის. .innerWidth (მნიშვნელობა) მნიშვნელობა- მთელი რიცხვითი მნიშვნელობა, რომელიც შეიტანება ნაკრების კანის ელემენტისთვის. .innerWidth (ფუნქცია) - ერთი ან მეტი სახელი კლასისთვის, გაძლიერებული ერთი ტიპის სივრცით. .addClass (ფუნქცია)

4.4. Method.innerHeight()

აბრუნებს პირველი ელემენტის სიმაღლეს კომპლექტის შესაფუთად სწორი ბალიშით.

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

4.5. Method.outerWidth()

გადაატრიალეთ პირველი ელემენტის სიგანე შეფუთვაში. ეს ზომა მოიცავს ჩარჩოს სისქეს და გახსნის სიგანეს.

OuterWidth (ლოგიკური მნიშვნელობები) უფრო ლოგიკური მნიშვნელობა

4.6. Method.outerHeight()

დაატრიალეთ პირველი ელემენტის სიმაღლე შეფუთვაში. ეს ზომა მოიცავს ჩარჩოს სისქეს და გახსნის სიგანეს.

OuterHeight (ლოგიკური მნიშვნელობები) უფრო ლოგიკური მნიშვნელობა- არასავალდებულო მნიშვნელობა, თუ დაყენებულია true, ზღვრის მნიშვნელობა დაფარულია, წინააღმდეგ შემთხვევაში ის მიუწვდომელია.

4.7. Method.offset()

ირჩევს პირველი ელემენტის ზუსტ კოორდინატებს ან ადგენს კოორდინატებს კანის ელემენტისთვის. ატრიალებს JavaScript ობიექტს მარცხნივ და ზევით მნიშვნელობებით, რათა მოათავსოს ნაკრებში შეფუთული პირველი ელემენტის px კოორდინატები დოკუმენტის გვერდზე. მეთოდი შემოიფარგლება მხოლოდ ხილული ელემენტებით.

Offset () მეთოდი გამოძახებულია პარამეტრების გარეშე.

4.8. მეთოდი.პოზიცია()

აბრუნებს JavaScript ობიექტს მარცხნივ და ზევით მნიშვნელობებით, რათა მოათავსოს პირველი ელემენტის კოორდინატები px-ში, რომელიც შეფუთულია უახლოესი ძველი ელემენტის ნაკრებში. მეთოდი შემოიფარგლება მხოლოდ ხილული ელემენტებით.

პოზიცია () მეთოდი გამოძახებულია პარამეტრების გარეშე.

CSS სელექტორები მნიშვნელოვანი ინგრედიენტია ვებსაიტის შემუშავებისას. თქვენ არ გჭირდებათ CSS კოდის მიბმა HTML-ის განთავსებამდე. რამდენ განსხვავებულ ამომრჩეველ შაბლონს რეგულარულად ახდენთ ვიკორიზირებას?

შვედშე ყველაფერზე, სულ ცოტა. შექმენით სია, რომელიც გარშემორტყმულია HTML ელემენტების, კლასებისა და იდენტიფიკატორების მარტივი სელექტორებით. გაცილებით მეტი შესაძლო სელექტორია.

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

ამ გაკვეთილების სერიაში განვიხილავთ სელექტორების შემდეგ ტიპებს:

• ატრიბუტების სელექტორები- აირჩიეთ HTML ატრიბუტები ელემენტების შესარჩევად.
• აერთიანებს- სელექტორების კომბინაცია ელემენტების უფრო ზუსტი მინიჭებისთვის.
• ფსევდო კლასი- ელემენტები, რომლებიც შეგვიძლია გამოვყოთ მომღერალ გონებაში.

კომბინატორები და ფსევდო კლასები იქნება გაშუქებული სერიის მომავალ გაკვეთილებზე.

პირველ რიგში, მოდით შევხედოთ მარტივ სელექტორებს.

Შენიშვნა: arms არის CSS ვერსია, რომელშიც სელექტორი გამოჩნდება.

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

მარტივი სელექტორები მოიცავს ტიპის ამომრჩეველს, უნივერსალურ სელექტორს, ატრიბუტის ამომრჩეველს, კლასის ამომრჩეველს, იდენტიფიკატორის ამომრჩეველს და ფსევდო კლასს (ფსევდო კლასს განვიხილავთ შემდეგ გაკვეთილზე).

ტიპის ამომრჩევი (1) E (ასახავს E ტიპის ნებისმიერ ელემენტს) - სელექტორში შეგვიძლია ნებისმიერი HTML ელემენტის ვიკორიზაცია.

უნივერსალური სელექტორი (2) * (ვარაუდობს ნებისმიერ ელემენტს)- თუ არის სტილი, რომელიც უნდა შეირჩეს გვერდზე ყველა ელემენტისთვის, მაშინ ეს სელექტორი არჩეულია.

კლასის ამომრჩეველი(1) .class (ასახავს ელემენტს კლასის კლასით)- სტილის ნებისმიერი ნაკრები, რომელიც შეიძლება შეირჩეს ნებისმიერი ელემენტისთვის, რომელიც იწვევს სიმღერის კლასს.

პირადობის ამომრჩეველი (1) #myid (მიუთითებს ელემენტს იდენტიფიკატორით myid)- სტილის ნებისმიერი ნაკრები, რომელიც გამოყენებული იქნება მხოლოდ ერთი ელემენტისთვის იმავე იდენტიფიკატორით.

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

ატრიბუტების სელექტორები

ლოგიკური ატრიბუტების სელექტორები დაინერგა CSS2-ში და გაფართოვდა CSS3-ში.

ე(2) - E ელემენტის მსგავსი ატრიბუტით "foo".

ე(2) - E ელემენტის მსგავსი, რომლის ატრიბუტს "foo" აქვს მნიშვნელობა "bar".

A (ფერი: მწვანე)

ე(2) - შეესაბამება E ელემენტს, რომელსაც აქვს ატრიბუტი "foo" სიის ხედში არსებული მნიშვნელობებით, გამოყოფილი გაწმენდით და ერთი მნიშვნელობა შესაბამისი "ზოლით".

A (ფერი: მწვანე)

ე(3) - შეესაბამება E ელემენტს, რომელსაც აქვს ატრიბუტი "foo" იმ მნიშვნელობებზე, რომლებიც იწყება მწკრივით "ზოლით".

A (ფერი: მწვანე)

ე(3) - შეესაბამება E ელემენტს, რომელსაც აქვს ატრიბუტი "foo" მნიშვნელობებით, რომლებიც მთავრდება მწკრივით "ზოლით".

A (ფერი: მწვანე)

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

ე(3) - შეესაბამება E ელემენტს, რომელიც შეიცავს ატრიბუტს "foo" იმ მნიშვნელობებით, რომლებიც ათავსებენ მწკრივს "ბარს".

A (ფერი: მწვანე)

ე(3) - შეესაბამება E ელემენტს, რომლის ატრიბუტს "foo" აქვს მნიშვნელობა სიის ხედში, გამოყოფილია ტირეთი და იწყება (მარცხნიდან მარჯვნივ) "en".

A (ფერი: მწვანე)

მრავალი ატრიბუტის ამომრჩევი

თქვენ შეგიძლიათ დააკავშიროთ რამდენიმე ატრიბუტის ამომრჩევი ერთდროულად:

A (ფერი: მწვანე)

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

ატრიბუტები თუ კლასები და იდენტიფიკატორები?

რა უპირატესობა აქვს მონაცვლე ატრიბუტებს კლასებთან და იდენტიფიკატორებთან შედარებით?

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

ასევე, HTML მარკირების მრავალი ელემენტი შეიცავს ატრიბუტებს სხვა მიზნებისთვის. href და ხშირად - სათაურის ატრიბუტი. სურათს ახლა ექნება alt ატრიბუტი. ელემენტები ქმნიან და ვიკორიზებენ ტიპის ატრიბუტს. HTML კოდი შეიცავს ატრიბუტების დიდ რაოდენობას. რატომ არ გამოვყოფთ მათთვის ატრიბუტების სელექტორების უპირატესობებს?

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

ატრიბუტების სელექტორებს შეუძლიათ დაამატონ HTML კოდი კონკრეტულ კლასებსა და იდენტიფიკატორებში.

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

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

ატრიბუტების ამორჩევის სინტაქსი

სიმღერის ატრიბუტის მქონე ელემენტებზე სტილის დასაყენებლად აუცილებელია ამ ატრიბუტის შეყვანა კვადრატულ მკლავებში.

[ატრიბუტი] ( ძალა: მნიშვნელობა; ...)

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

[ატრიბუტი = "მნიშვნელობა"] ( ძალა: მნიშვნელობა; ...)

ამ ატრიბუტებს შეიძლება ჰქონდეთ გამოტოვებული რამდენიმე მნიშვნელობა (მაგალითად, ტეგის ან კლასის rel ატრიბუტი, რომელსაც ცოტა მოგვიანებით განვიხილავთ). ასე რომ, იმისათვის, რომ დააყენოთ სტილის ელემენტები, რომლებსაც აქვთ იგივე მნიშვნელობები ატრიბუტებში, თქვენ უნდა დააყენოთ ~ = ნიშნები ატრიბუტის შემდეგ (დაახლოებით იგივე), შემდეგ კი დაწეროთ საჭირო მნიშვნელობები.

[ატრიბუტი ~ = "მნიშვნელობა"] ( ძალა: მნიშვნელობა; ...)

მეოთხე ვარიანტი ატრიბუტებისთვის დავალებისთვის, რომელთა მნიშვნელობები შეიძლება გაერთიანდეს დეფისით გამოყოფილი რამდენიმე სიტყვისგან (მაგალითად, იგივე კლასი). და ის საშუალებას გაძლევთ დააყენოთ სტილი ყველა ელემენტზე, რომელსაც აქვს პირველი სიტყვა ფასეულ ატრიბუტებში - თუმცა. მაგალითად, class = "block-left" და class = "block-right". თუმცა, აქ ნაწილი არის ბლოკი, ამიტომ ორივე შეიძლება ინტერპრეტირებული იყოს მნიშვნელობით.

[ატრიბუტი | = "მნიშვნელობა"] ( ძალა: მნიშვნელობა; ...)

მეხუთე მეთოდი ანიჭებს სტილებს ელემენტებს, რომელთა ატრიბუტების მნიშვნელობები იწყება იგივე ტექსტით. მაგალითად, src = "images/bird.png" და src = "images/cat.jpg". ამასთან, აქ არის სურათების ნაწილი / ან სურათები ან სურათი და ა. ეს ნაწილი თავად არის ჩაწერილი მნიშვნელობის ნაწილში.

[ატრიბუტი ^ = "მნიშვნელობა"] ( ძალა: მნიშვნელობა; ...)

მეხუთეს მსგავსად, გარდა აქ, შერჩევა გადის ტექსტის ნაწილზე, რომელიც საბოლოოდ მთავრდება ატრიბუტების მნიშვნელობებით. მისაღებია, რომ src = "image/bird.png" და src = "picture/dog.png". გასაგებია, რომ აქ არის ახალი ნაწილი, .png.

[$attribute = "მნიშვნელობა"] ( ძალა: მნიშვნელობა; ...)

თუ საჭიროა მთელ ტექსტში ატრიბუტების მნიშვნელობის მატარებელი ელემენტების დანახვა და მნიშვნელობა არ აქვს რა ადგილას, მაშინ გამოიყენება ეს მეთოდი. მაგალითად, href = "http: // საიტი / css /" და href = "http: //www.site/html/". თუმცა, აქ არის ახალი ნაწილი: "საიტი". ამ გზით, შესაძლოა, თქვენ ხედავთ თქვენს საიტზე მიმავალ ყველა შეტყობინებას.

[ატრიბუტი * = "მნიშვნელობა"] ( ძალა: მნიშვნელობა; ...)

სამწუხაროდ, Internet Explorer 6.0-ს არ ესმის ატრიბუტების სელექტორები.

CSS-ში ატრიბუტების სელექტორების გამოყენების მაგალითი

შედეგი ბრაუზერში