Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17542 / 1636 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Лекция 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 >
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

При дальнейшем просмотре результатов доступны только функции просмотра треков по выбранному альбому и предварительного прослушивания трека. 

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Татьяна Амельченко
Татьяна Амельченко
Россия
Berkut Molodoy
Berkut Molodoy
Россия