Што е селектор на повлекувачи на CSS?

Структурата на HTML документ е слична на семејното стебло. Во вашето семејство, имате родители и други кои дојдоа пред вас. Ова се твоите предци. Децата и оние кои доаѓаат по тебе на тоа дрво се вашите потомци. HTML работи на сличен начин. Елементите кои се внатре во другите елементи се нивните потомци. На пример, бидејќи скоро секој HTML елемент е во внатрешноста на таговите, тие ќе бидат потомок на тие елементи. Овој однос е важно да се разбере кога ќе почнете да работите со CSS и треба да наведете конкретни елементи за да ги примените визуелните стилови.

CSS појдовни селектори

Селекторот за наследување на CSS се однесува на елементите кои се во друг елемент (или попрецизно, елемент кој е потомок на друг елемент). На пример, некоректната листа има ознака со ознаки како потомци. Ајде да го искористиме следниов HTML како пример:

• Ова е врска

  ЛИ-таговите се потомци на ознаката на UL. Ознаката А е потомок на обележувачите на LI (детето потомок) и UL (внук). Ако мислите дека ќе размислите за ова со примерот на семејното стебло,

  ќе биде родител,
  • ќе биде детето на тој елемент, а ќе биде детето на
  • и внуката на
    .

    Па, како би ги насочиле конкретните елементи на веб-страница користејќи ги овие селектори на потомци? Прво, треба да ги дефинирате селекторите на потомци со користење на два (или повеќе) селектори од типот разделени со празни места.

    li a {текст-декорација: нема; }

    Во тој пример, стиловите ќе се однесуваат само на елементот на врски () кој е потомок на елемент од елемент од листата (

    • ). Сите други врски на страната кои не се потомок на елемент од листата нема да го добијат овој стил.

      Една важна работа е да се запамети дека не е важно колку тагови тие се наоѓаат помеѓу таговите што може да ги користите во вашиот селектор на потомци. Ако вториот елемент е затворен било каде во рамките на првиот елемент, тој ќе биде избран како потомок.

      Ако сакате да ги изберете сите сидра кои се потекнуваат од ul елементи, ќе напишете:

      ul {текст-декорација: нема; }

      Сега, овие стилови ќе се применат на било која врска која е потомок на елемент од листата. Можете исто така да го напишете овој селектор

      ul li {текст-декорација: нема; }

      Ова е наследник кој користи повеќе од два типа селектори. Во овој случај, ова ќе важи за линкови кои се во внатрешноста на листата на предмети и исто така во внатрешноста на некоректната листа.

      Користење на селектори за класа и селектори за ID

      Селекторите од кои се движите не мора секогаш да бидат тип на потомци. На пример, замислете дека сте имале површина од страницата (како поделба) со атрибут на ID на "билборд". Може да поставите селектор на потомци од тоа ID:

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

      Ова ќе стилизира неподреден список кој е потомок на елемент со лична карта на "билборд". Можете да го сторите истото за класа вредности.

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

      Ова претпоставува дека поделбата има класна вредност на "билбордот". CSS погоре ќе го стимулира елементот

      внатре во секоја поделба што ја има оваа класа вредност.

      Може да добиете навистина тешки раце и да ги разбеснете со наследни селектори. На пример, ако користите Dreamweaver да го напишете вашиот HTML код , постои поставка кога ќе додадете нови CSS правила кои автоматски ќе го креираат селекторот врз основа на поставеноста на курсорот на таа страница. Она што Dreamweaver го прави во овие случаи е да создаде дивовербан и долг селектор на потомци. Многу специфичност не е неопходно за вашиот CSS да работи. Она што сакате да направите е да пронајдете рамнотежа меѓу селекторот на потомок кој е доволно специфичен за да може да ги разбирите точните елементи што ви се потребни (без оние што не сакаат да влијаат), без правила на CSS кои имаат селектори кои се претерано големи.