Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Лекция 10:

CSS3. Селекторы

< Лекция 9 || Лекция 10: 123 || Лекция 11 >

Селекторы идентификаторов

Стиль, описанный при помощи селекторов идентификаторов, может быть применен только к одному элементу веб - страницы. При этом элемент должен содержать атрибут id с соответствующим значением.

Пример оформления селектора идентификаторов: #clrRed {color: red}.

Как и селекторы классов, селектор идентификатор может быть объединен с селектором элементов: li#clrRed {color: red}.

Селекторы потомков

Селектор потомков используется для задания стиля элементов, являющихся потомками другого элемента.

Оформляется селектор потомков следующим образом:

элемент-предок элемент-потомок { атрибуты стиля }

Следующий пример задаст стиль только для элементов <p>, являющихся потомком элемента <table>:

table p {color: red}

В следующем ниже коде контент, к которому будет применен указанный стиль, выделен красным:

    <div>
      <ul>
        <li>some text<p>some text</p></li>
        <li >some text part 2</li>
        <li>some text part 3</li>
      </ul>
    </div>
    
    <div>
      <table>
        <tr>
          <td> table 1.1</td>
          <td>table 1.2.1 <p>some text</p></td>
        </tr>
        <tr>
          <td>table 2.1</td>
          <td>table 2.2</td>
        </tr>
      </table>
    </div>

Селекторы потомков можно объединить с селекторами классов:

table.clr p {color: red}
или
table p.clr {color: red}

Равно как и с селекторами идентификаторов:

table#red p {color: red}

или

table p#clr {color: red}

Разумеется, можно организовывать и более "хитрые" комбинации:

table#red td.txt p.clr {color: red}

Селекторы дочерних элементов

Стили, описанные при помощи данных селектора применимы только к дочерним элементам.

Оформляется стиль с селектором дочерних элементов следующим образом:

элемент-родитель > дочерний элемент {атрибуты стиля}

Как и в предыдущих случаях, допустимо комбинировать различные селекторы:

table#red td.txt > p.clr {color: red}

В этом случае стиль будет применен к содержимому элемента <p>, относящегося к классу clr, и являющемуся дочерним элементом по отношению к тегу <td>, который, в свою очередь должен относиться к классу txt. При этом указанный тег <td> должен быть потомком <table> с идентификатором red.

Справедливости ради, стоит отметить, что подобные сложные комбинации селекторов, как правило, не используются.

Универсальные селекторы

Стили с универсальными селекторами применяются ко всем элементам веб - страницы. Оформление при этом выглядит следующим образом:

* {color: red}
< Лекция 9 || Лекция 10: 123 || Лекция 11 >
Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Константин Моренко
Константин Моренко
Алексей Бегунов
Алексей Бегунов
Беларусь
Виктор Лабутин
Виктор Лабутин
Россия